jQuery增加、删除及修改select option的方法

jQuery是一种快速的、小型的JavaScript库，设计和开发的目的是使HTML文档遍历和操作更加方便、快捷。下面我们将介绍如何使用jQuery对select控件的option进行增加、删除和修改。

插入option元素

使用jQuery的append()方法可以向select添加新的option元素。例如，以下代码将向id为“mySelect”的select中添加新的option元素：

$("#mySelect").append("<option value='value1'>text1</option>");

其中，value属性是选项真实的值，text是呈现在下拉框中的文本值。

删除option元素

使用jQuery的remove()方法可以删除select中的option元素。例如，以下代码将删除id为“mySelect”中的第一个option元素：

$("#mySelect option:first").remove();

修改option元素

使用jQuery的text()和val()方法可以修改select中的option元素的值。例如，以下代码将id为“mySelect”中第一个option的文本值改为“new text”：

$("#mySelect option:first").text("new text");

以下代码将id为“mySelect”中第一个option的值改为“new value”：

$("#mySelect option:first").val("new value"); 

以上就是对jQuery增加、删除及修改select option的方法的完整攻略了。

示例说明

以下是两个实例说明：

示例一

首先，我们创建一些option元素：

<select id="mySelect">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橘子</option>
</select>

我们可以使用以下代码向选择列表中插入新的option元素：

$("#mySelect").append("<option value='pear'>梨</option>");

这样，就在选择列表最后插入了一个新的选项，新的选项的值为“pear”，文本为“梨”。

示例二

以下代码演示了如何使用jquery从下拉框中删除选定的一个选项：

$("#mySelect option:selected").remove();

这会将选择列表中当前选定的选项删除。如果选择列表没有任何选项被选定，则不进行任何操作。