HTML 多个下拉框联动 JS 示例代码（论坛回复摘要）

问题

HTML 多个下拉框有相同的数据，选中一个数据其他下拉框删除这个数据，用js怎么实现

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

< body >    < div  align = "center" >两个下拉框你只能选择不同的值< br >      < select  id = "Color_1"  onChange = "ddlChange1(this.value);" >        < option  selected  value = '' >你的WEB编程语言</ option >        < option  value = 'ASP' >ASP</ option >        < option  value = 'PHP' >PHP</ option >        < option  value = 'JSP' >JSP</ option >        < option  value = 'CGI' >CGI</ option >      </ select >      < select  id = "Color_2"  onChange = "ddlChange2(this.value);" >        < option  selected  value = '' >你的WEB编程语言</ option >        < option  value = 'ASP' >ASP</ option >        < option  value = 'PHP' >PHP</ option >        < option  value = 'JSP' >JSP</ option >        < option  value = 'CGI' >CGI</ option >      </ select > < select  id = "Color_3"  onChange = "ddlChange3(this.value);" >        < option  selected  value = '' >你的WEB编程语言</ option >        < option  value = 'ASP' >ASP</ option >        < option  value = 'PHP' >PHP</ option >        < option  value = 'JSP' >JSP</ option >        < option  value = 'CGI' >CGI</ option >      </ select >    </ div > </ body >

答复

1 楼 的方案的问题是，当再次在第一个下拉框选择不同的值后，第二个下拉框的选择就丢失了一个（在第一轮选择时被removeChild给消除了！）。所以这里不能消除，只能隐藏。具体如下，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

function  ddlChange1(v){      displayOptions(2, [v]);      displayOptions(3, [v]);      ddlChange1.hiddenOption = v;   // keep the hidden value for ddlChange2 }   function  ddlChange2(v){      displayOptions(3, [ddlChange1.hiddenOption, v]); }   function  ddlChange3(v){ }   function  displayOptions(selectIndex, hiddenOptions){      // Get select element      var  el = document.getElementById( 'Color_'  + selectIndex);      el.value =  '' ;            var  i;            // Prepare hidden option set      var  hSet = {};      for  (i=0; i<hiddenOptions.length; i++) {          hSet[hiddenOptions[i]] =  true ;      }            // hide the hidden options and show the others      var  ops = el.options;      for (i=0 ; i < ops.length ; ++i) {          if (hSet[ops[i].value]){                             ops[i].style.display =  "none" ;  // hide          }  else  {              ops[i].style.display =  "" ;      // show          }      } }

这个解决方案，可以，使用者可以从左到右，退回，反复选择，直到满意为止。
例如：
第一轮：选择一，选择二，选择三
第二轮：回过头去，选择二，选择三
第三轮：回过头去从来，选择一，选择二，选择三

连接

回复见原贴 http://bbs.csdn.net/topics/390381744