Agregar opciones para seleccionar con javascript

Quiero que este JavaScript cree opciones del 12 al 100 en una selección con id = "mainSelect", porque no quiero crear todas las etiquetas de opciones 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;
}

Puede lograr esto con un simple forbucle:

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

Demostración de JS Fiddle .

La comparación de JS Perf de la respuesta mía y de Sime Vidas se ejecutó porque pensé que la suya parecía un poco más comprensible / intuitiva que la mía y me pregunté cómo se traduciría eso en la implementación. De acuerdo con Chromium 14 / Ubuntu 11.04, la mía es algo más rápida, aunque es probable que otros navegadores / plataformas tengan resultados diferentes.

Editado en respuesta al comentario de OP:

[¿Cómo] aplico [I] 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);

Demostración de JS Fiddle .

Y, finalmente (después de bastante retraso ...), un enfoque que extiende el prototipo del HTMLSelectElementpara encadenar la populate()función, como método, 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
});

Demostración de JS Fiddle .

Referencias

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

Aqui tienes:

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

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

Actualización: ya que desea reutilizar este código, aquí está la función para ello:

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

La forma más concisa e intuitiva sería:

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>

También puede diferenciar el nombre y el valor o agregar elementos al comienzo de la lista con parámetros adicionales a las funciones utilizadas:
HTMLSelect Element .add (elemento [, antes]);
nueva Opción (texto, valor, predeterminado Seleccionado, seleccionado);

No recomiendo hacer manipulaciones DOM dentro de un ciclo, eso puede ser costoso en grandes conjuntos de datos. En cambio, haría 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á la esencia:

Se utiliza como una versión ligera de Document para 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 del documento no es parte de la estructura real del DOM, los cambios realizados en el fragmento no afectan el documento, causan reflujo o inciden en el rendimiento que puede ocurrir cuando se realizan cambios.

Lo único que evitaría es realizar operaciones DOM en un bucle para evitar repeticiones repetidas 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: eliminó la función para mostrar cómo puede asignar el html que ha creado a otro elemento de selección, evitando así el bucle innecesario repitiendo la llamada a la función.

Consulte: ¿Cuál es la mejor manera de agregar opciones a una selección de una matriz con jQuery?

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

Cuando crea un nuevo Optionobjeto, debe pasar dos parámetros: el primero es el texto que desea que aparezca en la lista y el segundo el valor que se asignará a la opción.

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

Luego, simplemente asigne este Optionobjeto a un elemento de matriz vacío, por ejemplo:

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

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

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

A menudo tiene una serie de registros relacionados, me resulta fácil y bastante declarativo llenar de selectesta manera:

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

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

Sintaxis compatible con IE11:

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