Comment ajouter une liste déroulante (<select>) de manière programmatique ?

Question

Je veux créer une fonction afin d'ajouter de façon programmatique des éléments sur une page.

Disons que je veux ajouter une liste déroulante avec quatre options :

<select name="drop1" id="Select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Comment puis-je faire ça ?

Answer 1

Cela fonctionnera (JS pur, ajout à un div d'id. myDiv ) :

Démonstration : http://jsfiddle.net/4pwvg/

var myParent = document.body;

//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];

//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);

//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i];
    option.text = array[i];
    selectList.appendChild(option);
}

Answer 2

var sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';

var cars = [
  "volvo",
  "saab",
  "mercedes",
  "audi"
];

var options_str = "";

cars.forEach( function(car) {
  options_str += '<option value="' + car + '">' + car + '</option>';
});

sel.innerHTML = options_str;

window.onload = function() {
  document.body.appendChild(sel);
};

Answer 3

J'ai rapidement créé une fonction qui peut réaliser cela, ce n'est peut-être pas la meilleure façon de le faire, mais cela fonctionne simplement et devrait être compatible avec tous les navigateurs. Sachez également que je ne suis PAS un expert en JavaScript, donc tous les conseils sont les bienvenus :)

Solution pour créer des éléments en Javascript pur

function createElement(){
    var element  = document.createElement(arguments[0]),
        text     = arguments[1],
        attr     = arguments[2],
        append   = arguments[3],
        appendTo = arguments[4];

    for(var key = 0; key < Object.keys(attr).length ; key++){
        var name = Object.keys(attr)[key],
             value = attr[name],
             tempAttr = document.createAttribute(name);
             tempAttr.value = value;
        element.setAttributeNode(tempAttr)
    }

    if(append){
        for(var _key = 0; _key < append.length; _key++) {
            element.appendChild(append[_key]);
        }
    }

    if(text) element.appendChild(document.createTextNode(text));

    if(appendTo){
        var target = appendTo === 'body' ? document.body : document.getElementById(appendTo);
        target.appendChild(element)
    }       

    return element;
}

Voyons comment nous allons procéder

<select name="drop1" id="Select1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

voici comment cela fonctionne

    var options = [
        createElement('option', 'Volvo', {value: 'volvo'}),
        createElement('option', 'Saab', {value: 'saab'}),
        createElement('option', 'Mercedes', {value: 'mercedes'}),
        createElement('option', 'Audi', {value: 'audi'})
    ];

    createElement('select', null, // 'select' = name of element to create, null = no text to insert
        {id: 'Select1', name: 'drop1'}, // Attributes to attach
        [options[0], options[1], options[2], options[3]], // append all 4 elements
        'body' // append final element to body - this also takes a element by id without the #
    );

voici les paramètres

createElement('tagName', 'Text to Insert', {any: 'attribute', here: 'like', id: 'mainContainer'}, [elements, to, append, to, this, element], 'body || container = where to append this element');

Cette fonction conviendrait si vous devez ajouter de nombreux éléments. S'il y a un moyen d'améliorer cette réponse, faites-le moi savoir.

éditer :

Voici une démo qui fonctionne

Démonstration de JSFiddle

Il peut être hautement personnalisé pour s'adapter à votre projet !

Answer 4

Ce code permet de créer une liste de sélection de manière dynamique. D'abord, je crée un tableau avec les noms des voitures. Ensuite, je crée un élément de sélection de façon dynamique, je l'affecte à une variable "sEle" et je l'ajoute au corps du document html. Ensuite, j'utilise une boucle for pour parcourir le tableau. Troisièmement, je crée dynamiquement l'élément option et je l'affecte à une variable "oEle". À l'aide d'une instruction if, j'attribue les attributs "disabled" et "selected" au premier élément d'option [0] afin qu'il soit toujours sélectionné et qu'il soit désactivé. Je crée ensuite un tableau de nœuds de texte "oTxt" pour ajouter les noms du tableau, puis j'ajoute le nœud de texte à l'élément option qui est ensuite ajouté à l'élément select.

var array = ['Select Car', 'Volvo', 'Saab', 'Mervedes', 'Audi'];

var sEle = document.createElement('select');
document.getElementsByTagName('body')[0].appendChild(sEle);

for (var i = 0; i < array.length; ++i) {
  var oEle = document.createElement('option');

  if (i == 0) {
    oEle.setAttribute('disabled', 'disabled');
    oEle.setAttribute('selected', 'selected');
  } // end of if loop

  var oTxt = document.createTextNode(array[i]);
  oEle.appendChild(oTxt);

  document.getElementsByTagName('select')[0].appendChild(oEle);
} // end of for loop

Answer 5

Voici une version ES6 de la réponse fournie par 7stud .

const sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';

const cars = [
  "Volvo",
  "Saab",
  "Mercedes",
  "Audi",
];

const options = cars.map(car => {
  const value = car.toLowerCase();
  return `<option value="${value}">${car}</option>`;
});

sel.innerHTML = options;

window.onload = () => document.body.appendChild(sel);