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 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