Ajout d'options à sélectionner avec javascript

Je veux que ce javascript crée des options de 12 à 100 dans une sélection avec id = "mainSelect", car je ne veux pas créer toutes les balises d'option manuellement. Pouvez-vous me donner quelques conseils? Merci

function selectOptionCreate() {

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

  return line;
}

Vous pouvez y parvenir avec une simple forboucle:

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

Démo de JS Fiddle .

Comparaison JS Perf de la mienne et de la réponse de Sime Vidas , exécutée parce que je pensais que la sienne avait l'air un peu plus compréhensible / intuitive que la mienne et je me demandais comment cela se traduirait par une implémentation. Selon Chromium 14 / Ubuntu 11.04, le mien est un peu plus rapide, mais d'autres navigateurs / plates-formes auront probablement des résultats différents.

Modifié en réponse au commentaire de OP:

[Comment] [j'applique] ceci à plus d'un élément?

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

Démo de JS Fiddle .

Et, enfin (après un certain temps ...), une approche étendant le prototype du HTMLSelectElementafin de chaîner la populate()fonction, en tant que méthode, au nœud 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
});

Démo de JS Fiddle .

Références:

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

Voici:

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

Démo en direct: http://jsfiddle.net/mwPb5/

Mise à jour: puisque vous souhaitez réutiliser ce code, voici la fonction pour cela:

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

Usage:

initDropdownList( 'mainSelect', 12, 100 );

Démo en direct: http://jsfiddle.net/mwPb5/1/

La manière la plus concise et la plus intuitive serait:

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>

Vous pouvez également différencier le nom et la valeur ou ajouter des éléments au début de la liste avec des paramètres supplémentaires aux fonctions utilisées:
HTMLSelect Element .add (item [, before]);
nouvelle option (texte, valeur, defaultSelected, selected);

Je ne recommande pas de faire des manipulations DOM à l'intérieur d'une boucle - cela peut coûter cher dans les grands ensembles de données. Au lieu de cela, je ferais quelque chose comme ceci:

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

Vous pouvez en savoir plus sur DocumentFragment sur MDN , mais voici l'essentiel:

Il est utilisé comme une version allégée de Document pour stocker un segment d'une structure de document composé de nœuds, tout comme un document standard. La principale différence est que, comme le fragment de document ne fait pas partie de la structure réelle du DOM, les modifications apportées au fragment n'affectent pas le document, ne provoquent pas de redistribution ou n'entraînent aucun impact sur les performances pouvant survenir lorsque des modifications sont apportées.

La seule chose que j'éviterais est de faire des opérations DOM en boucle pour éviter les re-rendus répétés de la page.

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: supprimé la fonction pour montrer comment vous pouvez simplement attribuer le code HTML que vous avez construit à un autre élément de sélection - évitant ainsi les boucles inutiles en répétant l'appel de fonction.

Voir: Quelle est la meilleure façon d'ajouter des options à une sélection dans un tableau avec jQuery?

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

Lorsque vous créez un nouvel Optionobjet, il y a deux paramètres à passer: le premier est le texte que vous souhaitez voir apparaître dans la liste, et le second la valeur à attribuer à l'option.

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

Vous affectez ensuite simplement cet Optionobjet à un élément de tableau vide, par exemple:

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

Aucune des solutions ci-dessus n'a fonctionné pour moi. La méthode Append n'a pas donné d'erreur lorsque j'ai essayé, mais elle n'a pas résolu mon problème. En fin de compte, j'ai résolu mon problème avec la propriété data de select2. J'ai utilisé json et j'ai obtenu le tableau, puis je l'ai donné dans l'élément select2 initialize. Pour plus de détails, vous pouvez voir ma réponse ci-dessous.

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

Souvent, vous avez un tableau d'enregistrements associés, je trouve qu'il est facile et assez déclaratif de remplir de selectcette façon:

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

Cela remplacera les options existantes.
Vous pouvez utiliser selectEl.insertAdjacentHTML('afterbegin', str);pour les ajouter à la place.
Et selectEl.insertAdjacentHTML('beforeend', str);de les ajouter au bas de la liste.

Syntaxe compatible IE11:

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