单选按钮与下拉列表联动

  • A+
所属分类:南山宾馆

原文地址:请点击此地址查看原文

单选按钮与下拉列表联动  代码如下:

  1. <script>
  2.  function doRdo(sele){
  3.   var selOptions = sele.options;
  4.   var rdos = document.getElementsByName("rdo");
  5.   for(i = 0 ; i < selOptions.length ; i++){
  6.    if(selOptions[i].selected == true){
  7.     rdos[i].checked = true;
  8.     return;
  9.    }
  10.   }
  11.  }
  12.  function doSel(rdoName){
  13.   var rdos = document.getElementsByName(rdoName);
  14.   var selOptions = document.getElementById("sel").options;
  15.   for(i = 0 ; i < rdos.length ; i++){
  16.    if(rdos[i].checked == true){
  17.     selOptions[i].selected = true;
  18.     return;
  19.    }
  20.   }
  21.  }
  22. </script>
  23. <body>
  24.  <select id="sel" onChange="doRdo(this)">
  25.   <option value="1">选项1</option>
  26.   <option value="2">选项2</option>
  27.   <option value="3">选项3</option>
  28.   <option value="4">选项4</option>
  29.  </select>
  30.  <input type="radio" name="rdo" value="1" checked onclick="doSel(this.name)"/>选项1
  31.  <input type="radio" name="rdo" value="2" onclick="doSel(this.name)"/>选项2
  32.  <input type="radio" name="rdo" value="3" onclick="doSel(this.name)"/>选项3
  33.  <input type="radio" name="rdo" value="4" onclick="doSel(this.name)"/>选项4
  34. </body>

效果如下:


选项1
选项2
选项3
选项4

  • 丁春华的微信号
  • 个人微信号扫一扫
  • weinxin
  • 南山宾馆公众号
  • 宾馆公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: