📅 最后修改于: 2023-12-03 15:38:04.089000 🧑 作者: Mango
在 Web 开发中，下拉列表是一个常用的表单元素，用于选择一项或多项数据。当需要动态添加选项时，jQuery 可以帮助我们轻松实现。
本篇文章将介绍如何使用 jQuery 向下拉列表添加选项。
以下是向下拉列表添加选项的步骤：
通过 jQuery 选择器获取下拉列表元素，并存储在变量中，例如：
var selectElement = $('select');
使用 jQuery 创建新的选项元素，并指定其文本和值属性，例如：
var newOption = $('<option>').text('新选项').val('new-option-value');
将新创建的选项元素添加到下拉列表中，例如：
selectElement.append(newOption);
现在，下拉列表中已经添加了新的选项。
以下是一个完整的示例代码，可以将其复制粘贴到 HTML 文件中，并运行查看效果：
<!DOCTYPE html>
<html>
<head>
<title>向下拉列表添加选项示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<select>
<option value="option-1">选项一</option>
<option value="option-2">选项二</option>
</select>
<button id="add-option-button">添加选项</button>
<script>
$(function() {
var selectElement = $('select');
$('#add-option-button').click(function() {
var newOption = $('<option>').text('新选项').val('new-option-value');
selectElement.append(newOption);
});
});
</script>
</body>
</html>
在上面的示例代码中，我们创建了一个包含两个选项的下拉列表，并添加了一个按钮，点击按钮后会向下拉列表添加一个新的选项。