1
votes

Comment créer une liste déroulante de sélection à l'aide des données d'un tableau d'objets en JavaScript?

J'ai un tableau d'objets que j'aimerais utiliser pour remplir une liste déroulante d'option de sélection, mais ces éléments n'existent pas déjà et doivent être créés à partir de zéro.

J'ai du code de travail utilisant le createElement , mais je ne peux pas utiliser cette méthode ni utiliser options.add (new Option ()) . Sinon, comment puis-je créer les éléments select et option dans JavaScript?

  var optionsList = [
    	{
    	label: "Option 1",
    	value: "option-1"
    	},
    
    	{
    	label: "Option 2",
    	value: "option-2"
    	},
    	{
    	label: "Option 3",
    	value: "option-3"
    	}
    ];
    
    if (optionsList.length == 0) {
    	console.log("No data");
    } else {
    	var selectTag = document.createElement("SELECT");
    	document.body.appendChild(selectTag);
    
    	for (var i = 0; i < optionsList.length; i++) {
    		var option = optionsList[i];
    		selectTag.options.add(new Option(option.label, option.value));
    	}
    }

javascript arrays drop-down-menu javascript-objects

2 commentaires

Que signifie «je ne peux pas utiliser ça»?

Désolé, je voulais dire que je ne peux pas utiliser cette méthode pour créer l'élément select, ni utiliser options.add (nouvelle Option ()

3 Réponses :

0
votes

Au lieu de dire

optionsList.forEach(function(item, index, array) {

   var opt = document.createElement("option");
   opt.text = item.label;
   opt.value = item.value;

   selectTag.add(opt);
});

Créez simplement un nouvel élément 'option', puis ajoutez-le à la balise de sélection comme ceci

selectTag.options.add(new Option(...))

Vous pouvez consulter ce lien https://www.w3schools.com/jsref/met_select_add.asp pour plus d'informations.

et un exemple fonctionnel ici https://jsfiddle.net/ L5342j0y /

1 commentaires

Mais est-il possible de créer les éléments sans utiliser la méthode createElement ()?

2
votes

Vous pouvez simplement créer une chaîne avec des littéraux de modèle (plus facile et plus concis que la concaténation) et l'ajouter à l'élément select:

optionsList.forEach(e => selectTag.innerHTML += `<option value=${e.value}>${e.text}</option>`);

0 commentaires

0
votes

Le code HTML et JavaScript suivant montre comment ajouter une sélection et des options à l'aide des données d'un tableau d'objets contenant des étiquettes d'options et leurs valeurs:

function app() {

    var optionsList = [
        {
        label: "Option 1",
        value: "option-1"
        },
        {
        label: "Option 2",
        value: "option-2"
        },
        {
        label: "Option 3",
        value: "option-3"
        }
    ];

    var selectTag = document.createElement("select");

    for (let optObj of optionsList) {
        let optEle = document.createElement("option");
        optEle.text = optObj.label;
        optEle.value = optObj.value;
        selectTag.add(optEle);
    }

    var div = document.getElementById("div-id");
    div.appendChild(selectTag);
};

app.js :

<html>
<head>
    <meta charset="utf-8">
    <script src="app.js"></script>
</head>
<body onload="app()">
    <p>Select your choice:</p>
    <div id="div-id">
       <!-- The select with data gets added here -->
    </div>
</body>
</html>

0 commentaires