web-dev-qa-db-fra.com

Comment ajouter une liste déroulante (<select>) par programme?

Je veux créer une fonction afin d'ajouter par programme 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?

javascripthtmldrop-down-menuhtml-select
41
Christos Baziotis

Cela fonctionnera (JS pur, ajoutant à un div de id myDiv)

var myDiv = document.getElementById("myDiv");

//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";
myDiv.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);
}

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

131
tymeJV
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);
};
7
7stud

J'ai rapidement créé une fonction qui permet d'atteindre ce but. Ce n'est peut-être pas la meilleure façon de le faire, mais cela fonctionne simplement et devrait être multiniveau, veuillez également savoir que je ne suis PAS un expert en JavaScript et que tous les conseils sont excellents :)

Pure Javascript Create Element Solution

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

laisse voir comment nous faisons cela 

<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 ça 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 #
    );

c'est les params

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 existe un moyen d'améliorer cette réponse, veuillez me le faire savoir.

modifier:

Voici une démo de travail 

Démo JSFiddle

Cela peut être hautement personnalisé en fonction de votre projet!

2
iConnor

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);
1
Kevin Østerkilde

Ce code créerait une liste de sélection de manière dynamique. Je crée d'abord un tableau avec les noms de voiture. Deuxièmement, je crée un élément select de manière dynamique et l'assigne à une variable "sEle" et 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 l'assigne à une variable "oEle". À l'aide d'une instruction if, j'attribue les attributs «désactivé» et «sélectionné» au premier élément d'option [0] afin qu'il soit toujours sélectionné et désactivé. Je crée ensuite un tableau de nœuds de texte "oTxt" pour y ajouter les noms de tableaux, puis le nœud de texte à l'élément option qui sera ajouté ultérieurement à 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

1
user3385463

c’est très simple mais compliqué, mais voici ce que vous vouliez, espérons que cela vous aidera: cette fonction génère une liste de sélection de 1990 à 2018.. juste changer la valeur de x et y;) 

function dropDown(){
    var start = 1990;
    var today = 2019;
    document.write("<select>");
    for (var i = start ; i <= today; i++)
    document.write("<option>" + i + "</option>");
}
document.write("</select>");

dropDown();
0
kanaan
const countryResolver = (data = [{}]) => {
    const countrySelecter = document.createElement('select');
    countrySelecter.className = `custom-select`;
    countrySelecter.id = `countrySelect`;
    countrySelecter.setAttribute("aria-label", "Example select with button addon");

    let opt = document.createElement("option");
    opt.text = "Select language";
    opt.disabled = true;
    countrySelecter.add(opt, null);
    let i = 0;
    for (let item of data) {
        let opt = document.createElement("option");
        opt.value = item.Id;
        opt.text = `${i++}. ${item.Id} - ${item.Value}(${item.Comment})`;
        countrySelecter.add(opt, null);
    }
    return countrySelecter;
};
0
Aliaksandr Shpak

const cars = ['Volvo', 'Saab', 'Mervedes', 'Audi'];

let domSelect = document.createElement('select');
domSelect.multiple = true;
document.getElementsByTagName('body')[0].appendChild(domSelect);


for (const i in cars) {
  let optionSelect = document.createElement('option');

  let optText = document.createTextNode(cars[i]);
  optionSelect.appendChild(optText);

  document.getElementsByTagName('select')[0].appendChild(optionSelect);
}

0
Jesus Cuesta