web-dev-qa-db-fra.com

utiliser un tableau javascript pour remplir une liste déroulante

J'ai un fichier texte que je lis et stocke les données dans un tableau javascript, c'est une liste de cuisines. Je veux utiliser le tableau pour remplir une liste déroulante. Je sais comment coder en dur dans les valeurs de la liste déroulante (en utilisant correct me si je me trompe) mais je veux pouvoir utiliser le tableau pour le remplir à la place.

<script type="text/javascript">
var cuisines = ["Chinese","Indian"];            
</script>

<select id="CusineList"></select>

J'ai codé en dur un tableau pour plus de simplicité, la "CuisineList" est ma liste déroulante

javascripthtmldrop-down-menu
33
Ameya

Utilisez une boucle for pour parcourir votre tableau. Pour chaque chaîne, créez un nouvel élément option, affectez-la à ses propriétés innerHTML et value, puis ajoutez-la à l'élément select.

var cuisines = ["Chinese","Indian"];     
var sel = document.getElementById('CuisineList');
for(var i = 0; i < cuisines.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisines[i];
    opt.value = cuisines[i];
    sel.appendChild(opt);
}

[~ # ~] démonstration [~ # ~]

UPDATE: Utiliser createDocumentFragment et forEach

Si vous souhaitez ajouter une très grande liste d'éléments à un document, il peut être non performant d'ajouter chaque nouvel élément individuellement. DocumentFragment agit comme un objet document léger pouvant être utilisé pour collecter des éléments. Une fois que tous vos éléments sont prêts, vous pouvez exécuter une seule opération appendChild afin que le DOM ne soit mis à jour qu'une fois, au lieu de n fois.

var cuisines = ["Chinese","Indian"];     

var sel = document.getElementById('CuisineList');
var fragment = document.createDocumentFragment();

cuisines.forEach(function(cuisine, index) {
    var opt = document.createElement('option');
    opt.innerHTML = cuisine;
    opt.value = cuisine;
    fragment.appendChild(opt);
});

sel.appendChild(fragment);

[~ # ~] démonstration [~ # ~]

80
jackwanders

Cela fait partie d’un service REST que j’ai écrit récemment.

var select = $("#productSelect")
for (var prop in data) {
    var option = document.createElement('option');
    option.innerHTML = data[prop].ProduktName
    option.value = data[prop].ProduktName;
    select.append(option)
}

La raison pour laquelle j'envoie ceci est parce que appendChild () ne fonctionnait pas dans mon cas, j'ai donc décidé de proposer une autre possibilité qui fonctionne également.

4
Alexander Heim