jQuery 提供了一些有用且有趣的方法来帮助删除或者添加 select 元素中的选项。
我们可以删除所有选项或者仅删除一个选项，也可以添加多个选项或者删除所有选项并添加新选项。
让我们讨论所有场景并给出解决方案。
find() 方法在 <select> 元素中查找 <option> 标签。
然后 remove() 方法删除 select 元素中的所有选项：
$(document).ready(function () {
$("#submit").click(function () {
$('#selBooks')
.find('option')
.remove();
});
});
这是完整的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<select id="selBooks" name="books" style="font:14px Verdana;">
<option value="html">HTML Book</option>
<option value="git">Git Book</option>
<option value="javascript">JavaScript Book</option>
<option value="css">CSS Book</option>
</select>
<input type="submit" id="submit" value="Remove All" />
<script>
$(document).ready(function() {
$("#submit").click(function() {
$('#selBooks').find('option').remove();
});
});
</script>
</body>
</html>
要从列表中删除特定选项，请使用 remove() 方法指定选项的名称：
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Remove options from select.
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;" id="body">
<select>
<option value="css"> Css book</option>
<option value="javascript"> Javacript book</option>
<option value="git"> Git book</option>
<option value="html"> Html book</option>
</select>
<button> Remove </button>
<script>
$('button').on('click', function() {
$("option[value='css']").remove();
});
</script>
</body>
</html>
要在列表中保留特定选项并删除其余选项，请使用上面带有不等于 (!=) 符号的语句：
<!DOCTYPE HTML>
<html>
<head>
<title>
JQuery | Remove options from select.
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;" id="body">
<select>
<option value="javascript"> Javacript book</option>
<option value="css"> Css book</option>
<option value="git"> Git book</option>
<option value="html"> Html book</option>
</select>
<button> Remove </button>
<script>
$('button').on('click', function() {
$("option[value='css']").remove();
});
$('button').on('click', function() {
$('option[value="javascript"]').remove();
});
</script>
</body>
</html>
要添加新选项，请使用 append() 方法在列表末尾添加新选项：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<select id="selBooks" name="books" style="font:14px Verdana;">
<option value="html">HTML Book</option>
<option value="git">Git Book</option>
<option value="javascript">JavaScript Book</option>
<option value="css">CSS Book</option>
</select>
<input type="submit" id="submit" value="Append" />
<script>
$(document).ready(function() {
$("#submit").click(function() {
$('#selBooks').append('<option value="php">PHP Book</option>')
});
});
</script>
</body>
</html>
要在清除所有以前的选项后添加新选项，请使用以下代码：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<select id="selBooks" name="books" style="font:14px Verdana;">
<option value="html">HTML Book</option>
<option value="git">Git Book</option>
<option value="javascript">JavaScript Book</option>
<option value="css">CSS Book</option>
</select>
<input type="submit" id="submit" value="Append" />
<script>
$(document).ready(function() {
$("#submit").click(function() {
$('#selBooks').append('<option value="php">PHP Book</option>')
});
});
</script>
</body>
</html>
remove() 方法删除选项，end() 将对象带回到脚本的开头，append() 方法在列表中添加新选项。
日期：2020-06-02 22:16:07 来源：oir作者：oir