Aggiunta di opzioni per selezionare con javascript

Voglio che questo javascript crei opzioni da 12 a 100 in una selezione con id = "mainSelect", perché non voglio creare manualmente tutti i tag di opzione. Puoi darmi qualche suggerimento? Grazie

function selectOptionCreate() {

  var age = 88;
  line = "";
  for (var i = 0; i < 90; i++) {
    line += "<option>";
    line += age + i;
    line += "</option>";
  }

  return line;
}

Puoi farlo con un semplice forciclo:

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

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

Demo di JS Fiddle .

Il confronto tra JS Perf sia della mia e della risposta di Sime Vidas , eseguito perché pensavo che fosse un po 'più comprensibile / intuitivo della mia e mi chiedevo come ciò si sarebbe tradotto in implementazione. Secondo Chromium 14 / Ubuntu 11.04 la mia è un po 'più veloce, tuttavia altri browser / piattaforme avranno probabilmente risultati diversi.

Modificato in risposta al commento dell'OP:

[Come] [I] applicare questo a più di un elemento?

function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        select = document.getElementById(target);

        for (var i = min; i<=max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

Demo di JS Fiddle .

E, infine (dopo un bel ritardo ...), un approccio che estende il prototipo di al HTMLSelectElementfine di concatenare la populate()funzione, come metodo, al nodo DOM:

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 <= settings.max; i++) {
        this.appendChild(new Option(i, i));
    }
};

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

Demo di JS Fiddle .

Riferimenti:

• node.appendChild().
• document.getElementById().
• element.innerHTML.

Ecco qui:

for ( i = 12; i <= 100; i += 1 ) {
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );
}

Demo live: http://jsfiddle.net/mwPb5/

Aggiornamento: dal momento che si desidera riutilizzare questo codice, ecco la funzione per esso:

function initDropdownList( id, min, max ) {
    var select, i, option;

    select = document.getElementById( id );
    for ( i = min; i <= max; i += 1 ) {
        option = document.createElement( 'option' );
        option.value = option.text = i;
        select.add( option );
    }
}

Uso:

initDropdownList( 'mainSelect', 12, 100 );

Demo live: http://jsfiddle.net/mwPb5/1/

Il modo più conciso e intuitivo sarebbe:

var selectElement = document.getElementById('ageselect');

for (var age = 12; age <= 100; age++) {
  selectElement.add(new Option(age));
}

Your age: <select id="ageselect"><option value="">Please select</option></select>

Puoi anche differenziare il nome e il valore o aggiungere elementi all'inizio dell'elenco con parametri aggiuntivi alle funzioni utilizzate:
HTMLSelect Element .add (item [, before]);
nuova opzione (testo, valore, impostazione predefinita selezionata, selezionata);

Non consiglio di fare manipolazioni DOM all'interno di un ciclo, che possono diventare costose in set di dati di grandi dimensioni. Invece, farei qualcosa del genere:

var elMainSelect = document.getElementById('mainSelect');

function selectOptionsCreate() {
  var frag = document.createDocumentFragment(),
    elOption;
  for (var i=12; i<101; ++i) {
    elOption = frag.appendChild(document.createElement('option'));
    elOption.text = i;
  }
  elMainSelect.appendChild(frag);
}

Puoi leggere di più su DocumentFragment su MDN , ma ecco l'essenza:

Viene utilizzato come versione leggera di Document per memorizzare un segmento di una struttura di documento composta da nodi, proprio come un documento standard. La differenza fondamentale è che, poiché il frammento del documento non fa parte della struttura del DOM effettivo, le modifiche apportate al frammento non influiscono sul documento, causano il riflusso o incorrono in qualsiasi impatto sulle prestazioni che può verificarsi quando vengono apportate modifiche.

L'unica cosa che eviterei è eseguire le operazioni DOM in un ciclo per evitare ripetuti rendering della pagina.

var firstSelect = document.getElementById('first select elements id'),
    secondSelect = document.getElementById('second select elements id'),
    optionsHTML = [],
    i = 12;

for (; i < 100; i += 1) {
  optionsHTML.push("<option value=\"Age" + i + "\">Age" + i + "</option>";
}

firstSelect.innerHTML = optionsHTML.join('\n');
secondSelect.innerHTML = optionsHTML.join('\n');

Modifica: rimossa la funzione per mostrare come puoi semplicemente assegnare l'html che hai creato a un altro elemento select - evitando così il loop non necessario ripetendo la chiamata di funzione.

Vedi: Qual è il modo migliore per aggiungere opzioni a una selezione da un array con jQuery?

$('#mySelect')
      .append($('<option>', { value : key })
      .text(value)); 

Quando si crea un nuovo Optionoggetto, ci sono due parametri da passare: il primo è il testo che si desidera visualizzare nell'elenco e il secondo il valore da assegnare all'opzione.

var myNewOption = new Option("TheText", "TheValue");

È quindi sufficiente assegnare questo Optionoggetto a un elemento array vuoto, ad esempio:

document.theForm.theSelectObject.options[0] = myNewOption;

Nessuna delle soluzioni sopra ha funzionato per me. Il metodo di aggiunta non ha dato errori quando ho provato, ma non ha risolto il mio problema. Alla fine ho risolto il mio problema con la proprietà dei dati di select2. Ho usato json e ho ottenuto l'array e poi ho dato l'inizializzazione dell'elemento select2. Per maggiori dettagli puoi vedere la mia risposta al seguente post.

https://stackoverflow.com/a/41297283/4928277

Spesso hai una serie di record correlati, trovo facile e abbastanza dichiarativo riempire in selectquesto modo:

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

Questo sostituirà le opzioni esistenti.
Puoi invece usarli selectEl.insertAdjacentHTML('afterbegin', str);per aggiungerli all'inizio.
E selectEl.insertAdjacentHTML('beforeend', str);per aggiungerli in fondo all'elenco.

Sintassi compatibile IE11:

array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');