Aggiunta di opzioni da selezionare con javascript

Question

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; 
} 

Answer 1

si potrebbe ottenere questo con un semplice for ciclo:

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); 
} 

JS Fiddle demo.

JS Perf confronto di entrambi i miei e Sime Vidas' answer, eseguire perché ho pensato che il suo sembrava un po 'più comprensibile/intuitivo del mio e mi chiedevo come questo si tradurrebbe in attuazione. Secondo Chromium 14/Ubuntu 11.04 il mio è un po 'più veloce, altri browser/piattaforme hanno probabilmente risultati diversi.

---

Redatta in risposta al commento da OP:

[Come] fare [I] applicare questo per 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); 

JS Fiddle demo.

E, infine (dopo un certo ritardo ...), un approccio estende il prototipo del HTMLSelectElement per catena funzione populate(), 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 
}); 

JS Fiddle demo .

Riferimenti:

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

Answer 2

See: What is the best way to add options to a select from an array with jQuery?

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

Answer 3

L'unica cosa che eviterei è eseguire operazioni DOM in un ciclo per evitare ripetuti ri-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'); 

Edit: rimosso la funzione per mostrare come si può solo assegnare il codice HTML che hai costruito fino ad un altro elemento di selezione - evitando così l'inutile looping ripetendo la chiamata di funzione.

Answer 4

Qui si va:

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

Demo online: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 dal vivo:http://jsfiddle.net/mwPb5/1/

Answer 5

Nessuna delle soluzioni di cui sopra ha funzionato per me. Il metodo Append non ha dato errore quando ho provato ma non ha risolto il mio problema. Alla fine ho risolto il mio problema con la proprietà data di select2. Ho usato json e ho ottenuto l'array e poi lo ho dato in select2 element initialize. Per maggiori dettagli puoi vedere la mia risposta al di sotto del post.

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

Answer 6

Non consiglio di fare manipolazioni DOM all'interno di un ciclo - che può essere costoso in grandi insiemi di dati. Invece, vorrei fare qualcosa di simile:

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); 
} 

Si può leggere di più su DocumentFragment su MDN, ma ecco l'essenza di esso:

È usato come una versione leggera del Documento di memorizzare un segmento di una struttura di documento composta da nodi proprio come un documento standard. La differenza chiave è che poiché il frammento del documento non fa parte della struttura del DOM attuale, le modifiche apportate al frammento non influiscono sul documento, causano il reflow o incidono sulle prestazioni che possono verificarsi quando si verifica quando vengono apportate modifiche .

Answer 7

Spesso si hanno una serie di record correlati, lo trovo facile e abbastanza dichiarativa per riempire select questo modo:

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

Questo sostituirà le opzioni esistenti.
È possibile utilizzare selectEl.insertAdjacentHTML('afterbegin', str); per aggiungerli in alto.
E selectEl.insertAdjacentHTML('beforeend', str); per aggiungerli in fondo alla lista.

IE11 sintassi compatibile:

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