Geração de opções dinâmicas para elementos selecionados com JavaScript

No desenvolvimento web, frequentemente encontramos a necessidade de criar opções dinâmicas para elementos selecionados. Esta pode ser uma tarefa demorada se feita manualmente, especialmente quando se trata de um grande número de opções. Este artigo fornece soluções para automatizar esse processo usando JavaScript.

Criando opções com um loop For

Uma abordagem simples é usar um loop for para iterar por uma variedade de valores e criar elementos de opção dinamicamente. Por exemplo, para gerar opções de 12 a 100 em um elemento select com o ID "mainSelect", pode-se usar o seguinte código:

var min = 12;
var max = 100;
var select = document.getElementById('mainSelect');

for (var i = min; i 
Este código inicializa os valores mínimo e máximo e recupera o elemento select. Em seguida, ele entra em um loop para criar elementos de opção, definir seus valores e innerHTML e anexá-los ao elemento select.
Estendendo o HTMLSelectElement
Uma abordagem alternativa é estender o protótipo do HTMLSelectElement, permitindo adicionar diretamente um método "populate()" para selecionar elementos. Isso permite encadear a função de população aos nós DOM, fornecendo uma sintaxe mais concisa.
HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.max = settings.min   100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            settings[userOpt] = opts[userOpt];
        }
    }

    for (var i = settings.min; i 
Com esta extensão, você pode preencher elementos selecionados como este:
document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});