HOWTO · JavaScript
Ajouter des options pour sélectionner avec JavaScript
La possibilité manuelle d'ajouter une option pour sélectionner un élément peut être modifiée avec JavaScript. La manipulation de Dom pour créer et ajouter de nouvelles options, l'initialisation du constructeur Option pour ajouter des options et les méthodes génériques pour joindre de nouvelles options seront discutées ici.
Sur cette page
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 :
