web-dev-qa-db-fra.com

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 souhaite pas créer toutes les balises option manuellement. Pouvez-vous me donner des indications? Merci

function selectOptionCreate() {

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

  return line;
}
javascripthtml
129
jacktheripper

Vous pouvez y parvenir avec une simple boucle 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);
}

Démo de JS Fiddle .

JS Perf comparaison des réponses entre moi et la réponse de Sime Vidas , exécutée parce que je trouvais que son apparence était un peu plus compréhensible/intuitive que la mienne et je me demandais comment cela se traduirait par une mise en œuvre. Selon Chromium 14/Ubuntu 11.04, le logiciel est un peu plus rapide, mais les autres navigateurs/plateformes auront probablement des résultats différents.

Edited en réponse au commentaire de OP:

[Comment] [I] l'appliquer à 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 délai ...), une approche prolongeant le prototype de HTMLSelectElement afin de chaîner la fonction populate(), en tant que méthode, au noeud 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:

198
David Thomas

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/

Update: Puisque vous voulez réutiliser ce code, voici la fonction correspondante:

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/

18
Šime Vidas

Je ne recommande pas de faire des manipulations DOM dans une boucle - cela peut coûter cher dans de 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 de une structure de document composée de nœuds exactement comme un document standard . La principale différence réside dans le fait que le fragment de document ne fait pas partie de la structure actuelle du DOM, les modifications apportées au fragment n'affectent pas le document, provoquer une refusion ou avoir un impact sur les performances qui peut se produisent lorsque des modifications sont apportées.

7
thdoan

Voir: Quel est le meilleur moyen d'ajouter des options à une sélection dans un tableau avec jQuery?

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

La seule chose que je voudrais éviter est de faire des opérations DOM dans une boucle pour éviter les rediffusions répétées 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: suppression de la fonction pour montrer comment vous pouvez simplement affecter 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.

3
kinakuta

Lorsque vous créez un nouvel objet Option, vous devez transmettre deux paramètres: le premier est le texte que vous souhaitez Apparaît dans la liste et le second, la valeur à affecter à l'option.

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

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

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

Souvent, vous avez un tableau d'enregistrements liés. Je trouve facile de remplir select de cette 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 en haut.
Et selectEl.insertAdjacentHTML('beforeend', str); pour les ajouter au bas de la liste.

Syntaxe compatible avec IE11:

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

La manière la plus concise et 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, valeur par défaut, sélectionnée);

0
user

Aucune des solutions ci-dessus n'a fonctionné pour moi. La méthode Append n'a pas donné d'erreur quand j'ai essayé mais cela 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 obtenu le tableau, puis le initialize dans l'élément select2. Pour plus de détails, vous pouvez voir ma réponse ci-dessous.

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

0
Engin Aydoğdu