1:为Select添加事件，当选择其中一项时触发
2:jQuery设置Select的选中项
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery--checkbox</title>
6 <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
7 </head>
8 <body>
9 <select name="select" id="select_id" style="width:240px;">
10 <option value="tennis">tennis</option>
11 <option value="baseball">baseball</option>
12 <option value="football">football</option>
13 <option value="basketball">basketball</option>
14 </select>
15 </body>
16 <script>
17 $(function() {
18 // 1:为Select添加事件，当选择其中一项时触发
19 $("#select_id").change(function(){
20 console.log(‘发生选择事件‘);
21 // 获取Select选中项的Value
22 console.log($("#select_id").val());
23 // 获取Select选中项的text
24 console.log($("#select_id :selected").text());
25 // 或者：console.log($(‘#select_id‘).find(‘option:selected‘).text());
26 // 获取Select选中项的索引值(从0开始计数)
27 console.log($("#select_id").prop("selectedIndex"));
28 // 或者：console.log($("#select_id").get(0).selectedIndex);
29 });
30 // 2:jQuery设置Select的选中项
31 // 设置Select索引值为1的项选中
32 // $("#select_id").get(0).selectedIndex = 1;
33 // 设置Select的Value值为football的项选中
34 // $("#select_id").val(‘football‘);
35 });
36 </script>
37 </html>
3:jQuery添加/删除Select的Option项
1 // 3:jQuery添加/删除Select的Option项
2
3 // 为Select追加一个Option(下拉项)
4 $("#select_id").append("<option value=‘Pingpang‘>Pingpang</option>");
5 // 为Select插入一个Option(第一个位置)
6 $("#select_id").prepend("<option value=‘请选择‘>请选择</option>");
7 // 删除Select中索引值为1的Option(第二个)
8 $("#select_id").get(0).remove(1);
9 // 删除Select中索引值最大Option(最后一个)
10 $("#select_id :last").remove();
11 // 删除Select中Value=‘baseball‘的Option
12 $("#select_id [value=‘baseball‘]").remove();
13 // 清空Select中的所有Option
14 $("#select_id").empty();
时间： 2024-10-16 02:56:54