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