码迷,mamicode.com
首页 > Web开发 > 详细

[k]jQuery--select

时间:2015-07-28 20:33:53      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:

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();

 

[k]jQuery--select

标签:

原文地址:http://www.cnblogs.com/k11590823/p/4684017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!