Home > Article > Web Front-end > How to add new option to select option box using jQuery
How to add new option to select option box using jQuery
- coldplay.xixiOriginal
- 2020-11-25 10:25:303240browse
How to use jQuery to add new options to the select option box: 1. Add the options tag to the select element; 2. Use the [Option()] method to create a new option; 3. Create using value and text Create a new option element.
The operating environment of this tutorial: Windows 7 system, jquery version 3.3.1. This method is suitable for all brands of computers.
Related recommendations: "jQuery Video Tutorial"
How to use jQuery to add new options to the select option box:
Method 1: Add the options tag to the select element
First use the jquery selector to select the select element, and then use the append() method to add the options tag element. The append() method inserts the specified content into the last subcollection of the jQuery collection. This way the options element is added to the select element.
Syntax:
$('#selectBox').append(`${optionText}`)Example:
<!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:
Method 2: Use Option () method creates new options
#Option() method is used to create new option elements. This method will create a new option using text and the value of the option as arguments. Then use the append() method to add this option element to the selection box.
Syntax:
$('#selectBox').append(new Option(optionText, optionValue))
Example:
<!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>Rendering:
Method 3: Using values and text creation creates a new option element
Creates a new jQuery DOM element using the option tag. The value of the option tag is set using the val() method, and the text of the option tag is set using the text() method. Then use the append() method to add the created option element to the selection box.
Grammar:
$('#selectBox').append($('<option>').val(optionValue).text(optionText))
Example:
<!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:
For more programming-related knowledge, please visit : Programming learning! !
The above is the detailed content of How to add new option to select option box using jQuery. For more information, please follow other related articles on the PHP Chinese website!