jQuery操作下拉框（附带实例）

jQuery 对下拉框的常用操作，通常包括读取下拉框的值和设置下拉框的选中项、清空下拉框、向下拉框中添加选项等。

1) 读取下拉框的值。可以使用 val() 方法读取下拉框的值，代码如下：

var selVal = $("#id").val();

2) 设置下拉框的选中项。可以使用 attr() 方法设置下拉框的选中项，代码如下：

$("#id").attr("value", 选中项的值);

3) 清空下拉框。可以使用 empty() 方法清空下拉框，代码如下：

if($("#id").empty());

4) 向下拉框中添加选项。可以使用 append() 方法向下拉框中添加选项，代码如下：

if($("#id").append("<option value='值'>文本</option>");

【实例】 jQuery 操作下拉框。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，创建两个下拉框以及 4 个功能按钮，代码如下：

<div class="first">
    <select multiple name="hobby" id="hobby" class="sel">
        <option value="游泳">游泳</option>
        <option value="足球">足球</option>
        <option value="篮球">篮球</option>
        <option value="跑步">跑步</option>
        <option value="滑冰">滑冰</option>
        <option value="乒乓球">乒乓球</option>
        <option value="游泳">游泳</option>
        <option value="跳远">跳远</option>
        <option value="跳高">跳高</option>
    </select>
    <div class="sd">
        <button id="add">添加</button><br/><br/>
        <button id="add_all">全部添加</button>
    </div>
</div>
<div class="second">
    <select multiple name="other" id="other" class="sel"></select>
    <div class="sd">
        <button id="to_left">删除</button><br/><br/>
        <button id="all_to_left">全部删除</button>
    </div>
</div>

3) 编写 CSS 样式。

4) 在引入 jQuery 库的代码下方编写 jQuery 代码，单击“添加”按钮，将下拉框的选中项追加到另一个下拉框中；单击“全部添加”按钮，将下拉框的全部选项追加到另一个下拉框中；双击某个下拉框的选项，将其追加到另一个下拉框中。具体代码如下：

$(function(){
    $("#add").click(function(){
        var $options = $("#hobby option:selected");
        $options.appendTo("#other");
    });
    $("#add_all").click(function(){
        var $options = $("#hobby option");
        $options.appendTo("#other");
    });
    $("#hobby").dblclick(function(){
        var $options = $("option:selected",this);
        $options.appendTo("#other");
    });
    $("#to_left").click(function(){
        var $options = $("#other option:selected");
        $options.appendTo("#hobby");
    });
    $("#all_to_left").click(function(){
        var $options = $("#other option");
        $options.appendTo("#hobby");
    });
    $("#other").dblclick(function(){
        var $options = $("option:selected",this);
        $options.appendTo("#hobby");
    });
});

运行本实例，可以看到下图所示效果：

图 1 下拉效果

jQuery操作下拉框（附带实例）

相关文章