Heim > Artikel > Web-Frontend > So fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu
So fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu
- coldplay.xixiOriginal
- 2020-11-25 10:25:303240Durchsuche
So verwenden Sie jQuery, um dem Auswahloptionsfeld neue Optionen hinzuzufügen: 1. Fügen Sie das Options-Tag zum Auswahlelement hinzu. 2. Verwenden Sie die Methode [Option()], um eine neue Option zu erstellen Wert und Textelement.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JQuery-Version 3.3.1. Diese Methode ist für alle Computermarken geeignet.
Verwandte Empfehlungen: „jQuery-Video-Tutorial“
So verwenden Sie jQuery, um dem Auswahloptionsfeld neue Optionen hinzuzufügen:
Methode 1: Fügen Sie das Options-Tag zum Auswahlelement hinzu
Verwenden Sie jQuery, um Zuerst auswählen Der Selektor wählt das ausgewählte Element aus und verwendet dann die Methode append(), um das Options-Tag-Element hinzuzufügen. Die Methode append() fügt den angegebenen Inhalt in die letzte Untersammlung der jQuery-Sammlung ein. Auf diese Weise wird das Optionselement zum Select-Element hinzugefügt.
Syntax:
$('#selectBox').append(`${optionText}`)Beispiel:
<!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>Rendering:
Methode 2: Verwenden Sie die Option()-Methode, um neue Optionen zu erstellen
Die Option()-Methode wird verwendet um ein neues Optionselement zu erstellen. Diese Methode erstellt eine neue Option unter Verwendung von Text und dem Wert der Option als Argumente. Verwenden Sie dann die Methode append(), um dieses Optionselement zum Auswahlfeld hinzuzufügen. Option()方法用于创建新的option元素。该方法将使用文本和选项的值作为参数创建一个新选项。然后使用append()方法将此option元素添加到选择框中。
语法：
$('#selectBox').append(new Option(optionText, optionValue))
示例：
<!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>效果图：
方法3：使用值和文本创建创建新的option元素
使用option标签创建一个新的jQuery DOM元素。option标签的值是用val()
$('#selectBox').append($('<option>').val(optionValue).text(optionText))Beispiel:
<!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>Rendering:
Erstellen Sie ein neues jQuery DOM-Element mithilfe des Option-Tags. Der Wert des Options-Tags wird mit der Methode val() festgelegt, und der Text des Options-Tags wird mit der Methode text() festgelegt. Verwenden Sie dann die Methode append(), um das erstellte Optionselement zum Auswahlfeld hinzuzufügen.
Das obige ist der detaillierte Inhalt vonSo fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!