Ajouter des options pour sélectionner avec JavaScript
-
Créer une balise
optionet ajouter pour sélectionner en JavaScript -
Utiliser le constructeur
Optionpour ajouter de nouvelles options en JavaScript -
Utilisez l’élément DOM
jQuerypour ajouter de nouvelles options en JavaScript
Généralement, les options d’un élément select peuvent être organisées manuellement.
Mais avoir de nombreuses options et le manque de gestion dynamique des catégories peut poser des problèmes dans le cas manuel. À cet égard, les méthodes JavaScript consistant à créer de nouvelles options et à les modifier à la demande sont beaucoup plus acceptables.
Nous montrerons trois manières d’ajouter de nouvelles options à l’élément select. Tout d’abord, nous allons créer un élément option manipulant le DOM et ajoutant du texte et de la valeur pour stocker l’objet.
Plus tard, nous ajouterons l’objet au select-id. Une autre façon est d’initier un constructeur option et d’ajouter le texte et la valeur nécessaires.
Nous afficherons le travail en l’ajoutant à l’objet élément sélectionné. Et enfin, créez un élément Dom jQuery et ajoutez-le à select.
Créer une balise option et ajouter pour sélectionner en JavaScript
Nous allons déclarer une instance (x) pour le select et créer une option d'objet à l'option d'élément. Ensuite, nous allons attribuer du texte et une valeur à l’objet.
Voyons les lignes de code pour une meilleure compréhension.
Extrait de code:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
var x = document.getElementById("mySelect");
var option = document.createElement("option");
option.value = "hand";
console.log(option.value);
option.text = "Hand";
x.add(option);
}
</script>
</body>
</html>
Production :
Ainsi, la dernière commande de la balise scriptée a x.add(option), ce qui implique de joindre la nouvelle option au select. Ici, vous pouvez utiliser append et appendChild au lieu de add, ce qui fonctionnera très bien.
Utiliser le constructeur Option pour ajouter de nouvelles options en JavaScript
L’exemple suivant ne nécessite qu’un constructeur Option pour créer un nouvel emplacement pour une nouvelle option.
Le constructeur Option ne prend que deux paramètres. Tout d’abord, il prend la valeur textuelle puis l’entrée de l’attribut value.
Extrait de code:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script>
function myF() {
var x = document.getElementById("mySelect");
var option = new Option("Hand", "hand");
console.log(option.value);
x.appendChild(option);
}
</script>
</body>
</html>
Production :
Utilisez l’élément DOM jQuery pour ajouter de nouvelles options en JavaScript
L’élément DOM jQuery déclenche la balise option, puis les .val et .text sont utilisés pour définir le texte et la valeur. Ensuite, nous l’ajoutons au select-id.
Extrait de code:
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" size="3">
<option value="hair">Hair</option>
<option value="nose">Nose</option>
</select>
<button type="button" onclick="myF()">Add New Option</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
function myF() {
$('#mySelect').append($('<option>').val('head').text('Head'));
}
</script>
</body>
</html>
Production :
