HTML 多个上拉框联动 JS 示例代码（论坛回复摘要）
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