首页 > 编程笔记 > JavaScript笔记 阅读:5

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 下拉效果

相关文章