`
zhpengfei0915
  • 浏览: 64860 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

jquery select 下拉框实用操作

 
阅读更多

工作中避免不了会用到下拉框,今天总结一下jquery对select的常用操作(不包含多选项),下面的代码基于jquery1.7.2测试通过。

01 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
02
03 <select name="my_select" id="my_select">
04 <option value="v1">text1</option>
05 <option value="v2">text2</option>
06 <option value="v3" selected='true'>text3</option>
07 <option value="v4">text4</option>
08 <option value="v5">text5</option>
09 </select>
10
11 <script type="text/javascript">
12
13 $(function(){
14
15 //取当前选中值的几种方式
16 $('#my_select').val();
17 $('[name=my_select]').val();
18
19 //取option内容文本的方式
20 $('#my_select').text();
21
22 //取选中项的方式
23 $("#my_select option:selected");
24
25 //取选中option内容文本的方式
26 $('#my_select option:selected').text();
27
28 //选中指定项的几种方式
29 $("#my_select option[value='v4']").attr('selected', 'selected');
30 $("#my_select").val('v5');
31 $("#my_select").prop("selectedIndex", 1);
32
33 //选中第一个
34 $('#my_select option:first').attr('selected','selected');
35
36 //选中最后一个
37 $('#my_select option:last').attr('selected','selected');
38
39 //取option个数
40 $("#my_select option").length;
41
42 //change事件处理
43 $('#my_select').change(function(){
44
45 alert($('#my_select option:selected').text());
46
47 });
48
49 //根据option内容文本选中的方式,这里选中text4,filter函数真的是很强大
50 $("#my_select").val(function() {
51 return $('option', this).filter(function() {
52 return $(this).text() == 'text4';
53 }).val();
54 });
55
56 //遍历option
57 $("#my_select option").each(function() {
58 alert(this.text + ' ' + this.value);
59 });
60
61 //删除所有的option选项的方式
62 $('#my_select').empty();
63 $('#my_select option').remove();
64
65 });
66
67 </script>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics