极客教程如何从一个选择框中删除项目
在jQuery中，一个选项可以通过两种方法从选择框中移除。
方法1：直接删除框中的选项
要删除的选项是通过获得选择框选择的。要删除的值是在选择框的值选择器上指定的（value=’optionValue’）。然后使用remove()方法来删除这个被选中的选项。
语法:
$("selectBox option[value='optionValue']").remove()
示例:
<!DOCTYPE html>
<html>
<head>
<title>
Removing an item from a select box
</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>Removing an item from a select box</b>
<p>
Select one from the given options:
<select id="select1">
<option value="free">
Free
</option>
<option value="basic">
Basic
</option>
<option value="premium">
Premium
</option>
</p>
<p>Click the button below to
remove one option from the select box.</p>
<button onclick="removeOption()">
Remove option
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
function removeOption() {
/* select the option with the
value of basic and remove the option*/
$("#select1 option[value='basic']").remove();
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
方法2：使用find()方法
find()方法可以用来寻找值选择器中的选项。这个方法在DOM中搜索指定元素的后代，并从匹配的元素中创建一个新的jQuery对象。
选择框首先被选中，然后应用find()方法与值选择器来寻找选项。然后使用remove()方法来删除这个被选中的选项。
语法:
$('selectBox').find('[value="basic"]').remove()
示例:
<!DOCTYPE html>
<html>
<head>
<title>
Removing an item from a select box
</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>
Removing an item from a select box
</b>
<p>
Select one from the given options:
<select id="select1">
<option value="free">
Free
</option>
<option value="basic">
Basic
</option>
<option value="premium">
Premium
</option>
</p>
<p>
Click the button below to remove
one option from the select box.
</p>
<button onclick="removeOption()">
Remove option
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
function removeOption() {
/* select the option with the
value of basic and remove the option*/
$('#select1').find('[value="basic"]').remove();
}
</script>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
