知识积累日常_17.11.27_获取select中option的值

1. //获取第一个option的值   
2. $('#test option:first').val();   
3. //最后一个option的值   
4. $('#test option:last').val();   
5. //获取第二个option的值   
6. $('#test option:eq(1)').val();   
7. //获取选中的值   
8. $('#test').val();   
9. $('#test option:selected').val();   
10. //设置值为2的option为选中状态   
11. $('#test').attr('value','2');   
12. //设置第一个option为选中   
13. $('#test option:last').attr('selected','selected');   
14. $("#test").attr('value' , $('#test option:last').val());   
15. $("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());   
16. //获取select的长度   
17. $('#test option').length;   
18. //添加一个option   
19. $("#test").append("ff");   
20. $("ff").appendTo("#test");   
21. //添除选中项   
22. $('#test option:selected').remove();   
23. //指定项选中   
24. $('#test option:first').remove();   
25. //指定值被删除   
26. $('#test option').each(function(){   
27. if( $(this).val() == '5'){   
28. $(this).remove();   
29. }   
30. });   
31. $('#test option[value=5]').remove();   
32.   
33. //获取第一个Group的标签   
34. $('#test optgroup:eq(0)').attr('label');   
35. //获取第二group下面第一个option的值   
36. $('#test optgroup:eq(1) :option:eq(0)').val();  

获取select中全部option值：

1. <select id="language">  
2.       <option value="">请选择</option>  
3.       <option value="Java">Java</option>  
4.       <option value="PHP">PHP</option>  
5.       <option value="Jekyll">Jekyll</option>  
6. </select>  

[javascript]  view plain  copy

1. $(function(){  
2.      var array = new Array();  //定义数组   
3.      $("#language option").each(function(){  //遍历所有option  
4.           var txt = $(this).val();   //获取option值   
5.           if(txt!=''){  
6.                array.push(txt);  //添加到数组中  
7.           }  
8.      })  
9. })  

获取select中选择的text与value相关的值

[javascript]  view plain  copy

1. 获取select选择的Text : var checkText=$("#slc1").find("option:selected").text();   
2. 获取select选择的value:var checkValue=$("#slc1").val();   
3. 获取select选择的索引值: var checkIndex=$("#slc1 ").get(0).selectedIndex;   
4. 获取select最大的索引值: var maxIndex=$("#slc1 option:last").attr("index");   

设置select选择的Text和Value  

[javascript]  view plain  copy

1. 设置select索引值为1的项选中：$("#slc1 ").get(0).selectedIndex=1;   
2. 设置select的value值为4的项选中： $("#slc1 ").val(4);   
3. 设置select的Text值为JQuery的选中：   
4. $("#slc1 option[text='jQuery']").attr("selected", true);   
5. PS：特别要注意一下第三项的使用哦。看看JQuery的选择器功能是如此地强大呀！   

友情提示：

jquery代码中，可以直接在select对应的dom节点上直接复制就可以实现选中的效果，

如：$("#productId").val(data.id);

但是在实际开发中我们经常遇到一个问题就是ajax返回数据渲染失败，

这是由于ajax自身书异步请求的，你不知道是返回结果值先渲染页面还是你的jquer先操作dom节点，解决这个问题很简单，将ajax请求设为同步，加上asyn: false即可；

添加删除option项

[javascript]  view plain  copy

1. 为select追加一个Option(下拉项)   
2. $("#slc2").append(""+i+"");   
3. 为select插入一个option(第一个位置)   
4. $("#slc2").prepend("请选择");   
5. PS: prepend 这是向所有匹配元素内<span id="transmark"></span>部的开始处插入内容的最佳方式。   
6. 删除select中索引值最大option(最后一个)   
7. $("#slc2 option:last").remove();   
8. 删除select中索引值为0的option(第一个)   
9. $("#slc2 option[index='0']").remove();   
10. 删除select中value='3'的option   
11. $("#slc2 option[value='3']").remove();   
12. 删除select中text='4'的option   
13. $("#slc2 option[text='3']").remove();  

option去重

[javascript]  view plain  copy

1. $("select option").each(function() {  
2.             text = $(this).text();  
3.             if($("select option:contains("+text+")").length > 1)  
4.                 $("select option:contains("+text+"):gt(0)").remove();  
5.         });  

判断checkbox是否选择：

（如果选择的checkbox本身的话，可以直接用this.checked判断是否被选择，如果从其他节点获取到checkbox节点的话用方法二）

[javascript]  view plain  copy

1. <span style="font-size:12px;">网上大多数文章都提供的方法都是无效的,害死个人,本文中的方法小编亲测试有效,建议使用方法二：  
2.   
3. 方法一：  
4. if ($("#checkbox-id")get(0).checked) {  
5.     // do something  
6. }  
7.   
8. 方法二：  
9. if($('#checkbox-id').is(':checked')) {  
10.     // do something  
11. }  
12.   
13. 方法三：  
14. if ($('#checkbox-id').attr('checked')) {  
15.     // do something  
16. }</span>  

获取选中checkbox的个数：

[javascript]  view plain  copy

1. <span style="font-size:12px;">var num = $("input[type='checkbox'][class='subcheck']:checked").length;</span>