Agregar opciones para seleccionar con javascript

Question

Quiero que este javascript cree opciones de 12 a 100 en una selección con id = "mainSelect", porque no quiero crear todas las etiquetas de opción manualmente. ¿Me puede dar algunos consejos? Gracias

function selectOptionCreate() { 

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

    return line; 
} 

Answer 1

que podría lograr esto con un simple bucle for:

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 comparación de mine y Sime Vidas' answer, se ejecuta porque pensé que se veía un poco más comprensible/intuitivo que el mío y me preguntaba cómo se traduciría en la implementación. Según Chromium 14/Ubuntu 11.04 la mina es algo más rápida, sin embargo, es probable que otros navegadores/plataformas tengan resultados diferentes.

---

Editado en respuesta a las observaciones de la OP:

[Cómo] qué [I] se aplica esto a más de 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.

Y, finalmente (después de un retraso bastante ...), un enfoque que se extiende el prototipo de la HTMLSelectElement con el fin de la cadena de la función populate(), como un método, para el 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 .

Referencias:

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

Answer 2

Ver: 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

Lo único que evitaría es hacer operaciones DOM en un bucle para evitar repetidas repeticiones de la página.

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

Editar: elimina la función de mostrar la forma en que sólo puede asignar el código HTML que se ha construido hasta otro elemento select - evitando así el bucle innecesarios mediante la repetición de la llamada de función.

Answer 4

Aquí van:

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

Demostración en directo:http://jsfiddle.net/mwPb5/

---

Actualización: Desde desea volver a utilizar este código, aquí está la función para la que:

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

Demostración en directo:http://jsfiddle.net/mwPb5/1/

Answer 5

Ninguna de las soluciones anteriores funcionó para mí. El método de agregar no dio error cuando lo intenté pero no resolvió mi problema. Al final, resolví mi problema con la propiedad de datos de select2. Usé json y obtuve la matriz y luego la di en initial element element select. Para obtener más detalles, puede ver mi respuesta en la siguiente publicación.

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

Answer 6

Yo no recomiendo hacer manipulaciones de DOM dentro de un bucle - que puede ser caro en grandes conjuntos de datos. En su lugar, me gustaría hacer algo como esto:

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

Puede leer más sobre DocumentFragment en MDN, pero aquí está el quid de la cuestión:

Se utiliza como una versión ligera del Documento de almacenar un segmento de una estructura de documento compuesta de nodos al igual que un documento estándar. La diferencia clave es que debido a que el fragmento de documento no es parte de la estructura real del DOM, los cambios realizados en el fragmento no afectan el documento, provocan el reflujo ni incurren en ningún impacto en el rendimiento que pueda ocurrir cuando se realizan cambios .

Answer 7

A menudo tiene una matriz de registros relacionados, me parece que sea fácil y bastante declarativa para llenar select esta manera:

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

Esto reemplazará opciones existentes.
Puede usar selectEl.insertAdjacentHTML('afterbegin', str); para agregarlos a la parte superior.
Y selectEl.insertAdjacentHTML('beforeend', str); para agregarlos al final de la lista.

EI11 sintaxis compatibles:

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