jquery及原生js获取select下拉框选中的值示例、 radio 选中后的值和文字

jquery及原生js获取select下拉框选中的值示例、 radio 选中后的值和文字

  1. <select id="test" name="">     
  2.      <option value="1">text1</option>     
  3.      <option value="2">text2</option>     
  4. </select>   
  1. //一:javascript原生的方法   
  2.   
  3. 拿到select对象: var myselect=document.getElementById("test");   
  4.   
  5. 拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index   
  6.   
  7. 拿到选中项options的value: myselect.options[index].value;   
  8.   
  9. 拿到选中项options的text: myselect.options[index].text;   
  10.   
  11. //二:jquery方法(前提是已经加载了jquery库)   
  12.   
  13. var options=$("#test option:selected"); //获取选中的项   
  14.   
  15. alert(options.val()); //拿到选中项的值   
  16.   
  17. alert(options.text()); //拿到选中项的文本  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <title>JQuery radio</title>  
  7.     <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js"></script>  
  8.     <script type="text/javascript" language="javascript">  
  9.  /*------判断radio是否有选中,获取选中的值--------*/  
  10.     $(function(){  
  11.          $("#btnSubmit").click(function(){  
  12.             var val=$('input:radio[name="sex"]:checked').val();  
  13.             if(val==null){  
  14.                 alert("什么也没选中!");  
  15.                 return false;  
  16.             }  
  17.             else{  
  18.                 alert(val);  
  19.             }  
  20.             var list= $('input:radio[name="list"]:checked').val();  
  21.             if(list==null){  
  22.                 alert("请选中一个!");  
  23.                 return false;  
  24.             }  
  25.             else{  
  26.                 alert(list);  
  27.             }             
  28.          });  
  29.      });  
  30. </script>  
  31. </head>  
  32.   
  33. <body>  
  34.     <form id="form1">  
  35.         <input type="radio" name="sex" value="男" />男  
  36.         <input type="radio" name="sex" value="女" />女  
  37.         <br />  
  38.         <input type="radio" name="list" value="十分满意" />十分满意  
  39.         <input type="radio" name="list" value="满意" />满意  
  40.         <input type="radio" name="list" value="不满意" />不满意  
  41.         <input type="radio" name="list" value="非常差" />非常差  
  42.         <br />  
  43.         <input type="submit" value="submit" id="btnSubmit" />  
  44.     </form>  
  45. </body>  
  46.   
  47. </html>  
  1. 首先,他给出的 HTML 示例如下:  
  2.   
  3.   <input type="radio" id="male" name="sex" value="1" />男  <input type="radio" id="female" name="sex" value="2" />女    
  4. 在这里直接给出 jQuery 获取 radio 选中后的文本的方法,如下:  
  5.   
  6.   $("input[name='sex']:checked")[0].nextSibling.nodeValue    
  7. 方法将 jQuery 对象转换为 DOM 对象后,再使用原生的 javascript 方法获取文本。在我回复朋友前,他通过在 radio 后添加 span 标记来解决这个问题:  
  8.   
  9.   <input type="radio" id="male" name="sex" value="1" /><span></span>    
  10. 接来下获取时使用 next() 选择器,如下:  
  11.   
  12.   $("input[name='sex']:checked").next("span").text()    
  13. 问题看似到这里就结束了,其实不然,这并不是好的用户体验。好的做法应该为 radio 添加 for 标记,这样在点击 radio 文本"男"或"女"的时候也能选中 radio,这比让用户点击一个小圆圈容易多了。所以最好的 HTML 标记应该如下:  
  14.   
  15.   <input type="radio" id="male" name="sex" value="1" />  <label for="male"></label>  <input type="radio" id="female" name="sex" value="2" />  <label for="female"></label>    
  16. 最后获取 radio 选中后的文本我相信你已经会了,如下:  
  17.   
  18.   $("input[name='sex']:checked").next("label").text()    
虚拟主机
《JavaScript设计模式与开发实践 》PDF
《HTML5从入门到精通》PDF
《你不知道的JavaScript(中卷)》PDF
《JavaScript DOM编程艺术》(第二版)PDF
广告也精彩