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

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

问题

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

12345678910111213141516171819202122232425<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给消除了！）。所以这里不能消除，只能隐藏。具体如下，

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

HTML 多个上拉框联动 JS 示例代码（论

热点推荐