首页 > 编程笔记 > JavaScript笔记
阅读:5
jQuery操作下拉框(附带实例)
jQuery 对下拉框的常用操作,通常包括读取下拉框的值和设置下拉框的选中项、清空下拉框、向下拉框中添加选项等。
1) 读取下拉框的值。可以使用 val() 方法读取下拉框的值,代码如下:
2) 设置下拉框的选中项。可以使用 attr() 方法设置下拉框的选中项,代码如下:
3) 清空下拉框。可以使用 empty() 方法清空下拉框,代码如下:
4) 向下拉框中添加选项。可以使用 append() 方法向下拉框中添加选项,代码如下:
【实例】 jQuery 操作下拉框。
1) 创建一个名为 index.html 的文件,在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。
2) 在页面的 <body> 标记中,创建两个下拉框以及 4 个功能按钮,代码如下:
3) 编写 CSS 样式。
4) 在引入 jQuery 库的代码下方编写 jQuery 代码,单击“添加”按钮,将下拉框的选中项追加到另一个下拉框中;单击“全部添加”按钮,将下拉框的全部选项追加到另一个下拉框中;双击某个下拉框的选项,将其追加到另一个下拉框中。具体代码如下:

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