Maison > Article > interface Web > Comment ajouter une nouvelle option pour sélectionner la case d'option à l'aide de jQuery
Comment ajouter une nouvelle option pour sélectionner la case d'option à l'aide de jQuery
- coldplay.xixioriginal
- 2020-11-25 10:25:303240parcourir
Comment ajouter de nouvelles options à la boîte d'options de sélection à l'aide de jQuery : 1. Ajoutez la balise options à l'élément de sélection ; 2. Utilisez la méthode [Option()] pour créer une nouvelle option ; valeur et texte Créez un nouvel élément d'option.
L'environnement d'exploitation de ce tutoriel : Système Windows 7, jquery version 3.3.1 Cette méthode convient à toutes les marques d'ordinateurs.
Recommandations associées : "Tutoriel vidéo jQuery"
Comment utiliser jQuery pour ajouter de nouvelles options à la boîte d'options de sélection :
Méthode 1 : ajoutez la balise d'options à l'élément de sélection
Utilisez d'abord le sélecteur jquery pour sélectionner l'élément de sélection, puis utilisez la méthode append() pour ajouter l'élément de balise d'options . La méthode append() insère le contenu spécifié dans la dernière sous-collection de la collection jQuery. De cette façon, l’élément options est ajouté à l’élément select.
Syntaxe :
$('#selectBox').append(`${optionText}`)Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何使用jQuery向select元素中添加options？</title>
</head>
<body>
<h2 style="color: green"> 使用jQuery向select元素中添加options</h2>
<p>
从给定选项中选择一个：
<select id="select">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>单击下面的按钮，向选择框添加一个选项。</p>
<button onclick="addOption()">添加option</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select').append(`<option value="${optionValue}"> ${optionText} </option>`);
}
</script>
</body>
</html>Rendu :
Méthode 2 : Utiliser l'option The () crée une nouvelle option La méthode
Option() est utilisée pour créer un nouvel élément d'option. Cette méthode créera une nouvelle option en utilisant le texte et la valeur de l'option comme arguments. Utilisez ensuite la méthode append() pour ajouter cet élément d’option à la zone de sélection.
Syntaxe :
$('#selectBox').append(new Option(optionText, optionValue))
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何使用jQuery向select元素中添加options？</title>
</head>
<body>
<h2 style="color: red"> 使用jQuery向select元素中添加options</h2>
<p>
从给定选项中选择一个：
<select id="select">
<option value="hello">Hello</option>
<option value="hi">Hi</option>
</select>
</p>
<p>单击下面的按钮，向选择框添加一个选项。</p>
<button onclick="addOption()">添加option</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function addOption() {
optionText = 'welcome';
optionValue = 'welcome';
$('#select').append(new Option(optionText, optionValue));
}
</script>
</body>
</html>Rendu :
Méthode 3 : Utiliser les valeurs et la création de texte crée un nouvel élément d'option
à l'aide de la balise option crée un nouvel élément jQuery DOM. La valeur de la balise d'option est définie à l'aide de la méthode val() et le texte de la balise d'option est défini à l'aide de la méthode text(). Utilisez ensuite la méthode append() pour ajouter l’élément d’option créé à la zone de sélection.
Syntaxe :
$('#selectBox').append($('<option>').val(optionValue).text(optionText))
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何使用jQuery向select元素中添加options？</title>
</head>
<body>
<h2 style="color: green"> 使用jQuery向select元素中添加options</h2>
<p>
从给定选项中选择一个：
<select id="select">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>单击下面的按钮，向选择框添加一个选项。</p>
<button onclick="addOption()">添加option</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function addOption() {
optionText = 'Extra';
optionValue = 'extra';
$('#select').append($('<option>').val(optionValue).text(optionText));
}
</script>
</body>
</html>Rendu :
Pour plus de connaissances liées à la programmation, veuillez visiter : Apprenez la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!