首页  >  文章  >  后端开发  >  js获取radio与select属性的方法

js获取radio与select属性的方法

WBOY
WBOY原创
2016-07-25 09:12:421445浏览

实现一个联动菜单,目标: 1、点击“匿名小组”,自动跳转:成员类型“私密群”、访问控制 “群成员” 2、点击“公开群”, 自动跳转:成员类型“实名小组” 如下图: js radio与select属性    首先,获得点击radio的事件,用的是jquery库,获得事件后判断是那个radio,通过判断是那个radio被checked了然后进行联动变换。 其中遇到的问题有,兼容ie和firefox的事件,然后是设置select中的中options的selected属性。

兼容ie和firefox用了var ie=document.all;var nn6=document.getElementById&&!document.all; 设置select中的中options的selected属性用的是var t=document.getElementsByName("select1")[0][1]; t.setAttribute("selected","selected"); 在设置selected属性通常用的是document.getElementsByName("select1").options,但是firefox报undefined。于是遍历后就用了一个数组解决了。

例子,实现了目标1的完整代码:

  1. 实名小组(使用姓名)
  2. 匿名小组(使用昵称)
  3. 公开群
  4. 私密群
  5. // JavaScript Document
  6. var ie=document.all;
  7. var nn6=document.getElementById&&!document.all;
  8. $(document).ready(function(){
  9. $(":radio").click(function(e){
  10. var $name=(nn6?e.target.name:event.srcElement.name);
  11. if($name == "member_type")
  12. {
  13. if(1 == GetRadioValue($name))
  14. {
  15. SetRadioCheck("search_type",1);
  16. var t=document.getElementsByName("select1")[0][1];
  17. t.setAttribute("selected","selected");
  18. }
  19. }
  20. });
  21. });
复制代码

实现目标2时,遇到了SetRadioCheck中的setAttribute不好使了,调试了也不知道什么原因于是换了obj.checked = true; 实现功能1、2 js

  1. // JavaScript Document
  2. var ie=document.all;
  3. var nn6=document.getElementById&&!document.all;
  4. $(document).ready(function(){
  5. /*点击"匿名小组",自动跳转:成员类型"私密群"、访问控制 "群成员"*/
  6. $(":radio").click(function(e){
  7. var $name=(nn6?e.target.name:event.srcElement.name);
  8. if($name == "member_type")
  9. {
  10. if(1 == GetRadioValue($name))
  11. {
  12. SetRadioCheck("search_type",1);
  13. var t=document.getElementsByName("select1")[0][1];
  14. t.setAttribute("selected","selected");
  15. }
  16. }
  17. /*点击"公开群", 自动跳转:成员类型"实名小组"*/
  18. if($name == "search_type")
  19. {
  20. if(1 == GetRadioValue($name))
  21. {
  22. SetRadioCheck("member_type",0);
  23. }
  24. }
  25. });
  26. });
  27. /*获得被check的radio的值
  28. *RadioName:要获得radio值的radio组名称
  29. */
  30. function GetRadioValue(RadioName){
  31. var obj;
  32. obj=document.getElementsByName(RadioName);
  33. if(obj!=null){
  34. var i;
  35. for(i=0;iif(obj[i].checked){
  36. return obj[i].value;
  37. }
  38. }
  39. }
  40. return null;
  41. }
  42. /*设置被选中属性
  43. *RadioName:要修改属性radio组的名称
  44. *i:radio中第i个元素被选中
  45. */
  46. function SetRadioCheck(RadioName,i){
  47. var obj;
  48. obj=document.getElementsByName(RadioName);
  49. //obj[i].setAttribute("checked","checked");
  50. obj[i].checked = true;
  51. }
复制代码

对于在第二次调用SetRadioCheck

  1. if($name == "search_type")
  2. {
  3. if(1 == GetRadioValue($name))
  4. {
  5. SetRadioCheck("member_type",0);
  6. }
  7. }
  8. obj[i].setAttribute("checked","checked")的失效,还请指教。
复制代码


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn