动态移除上拉框的选项
日期：2014-05-16 浏览次数：20474 次
动态移除下拉框的选项
请问，有几个下拉框。前面选中之后，后面的下拉框里则移除或隐藏前面已经选中的选修，
比如下拉框里值是【1，2，3，4，5】，第一个选了1，后面就只剩下【2.3.4.5】，在后面只剩【3.4.5】，跪求帮助啊。
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var t=[];
function removes(srcdom,id){
var i=srcdom[srcdom.selectedIndex].innerHTML;
if(i!='请选择'){
t.push(i);
var se=document.getElementById(id);
for(var j=0;j<se.length;j++){
if(id=="test3"){
alert("a");
for(var k=0;k<t.length;k++){
if(se[j].innerHTML==t[k]){
se.removeChild(se[j]);
}
}
}else{
if(se[j].innerHTML==i){
se.removeChild(se[j]);
}
}
}
}
}
</script>
</head>
<body>
<select id="test1" onchange="removes(this,'test2')">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select id="test2" onchange="removes(this,'test3')">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select id="test3">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</body>
</html>
这样？？
------解决方案--------------------
请问，有几个下拉框。前面选中之后，后面的下拉框里则移除或隐藏前面已经选中的选修，
比如下拉框里值是【1，2，3，4，5】，第一个选了1，后面就只剩下【2.3.4.5】，在后面只剩【3.4.5】，跪求帮助啊。
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var t=[];
function removes(srcdom,id){
var i=srcdom[srcdom.selectedIndex].innerHTML;
if(i!='请选择'){
t.push(i);
var se=document.getElementById(id);
for(var j=0;j<se.length;j++){
if(id=="test3"){
alert("a");
for(var k=0;k<t.length;k++){
if(se[j].innerHTML==t[k]){
se.removeChild(se[j]);
}
}
}else{
if(se[j].innerHTML==i){
se.removeChild(se[j]);
}
}
}
}
}
</script>
</head>
<body>
<select id="test1" onchange="removes(this,'test2')">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select id="test2" onchange="removes(this,'test3')">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select id="test3">
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</body>
</html>
这样？？
------解决方案--------------------
<script type="text/javascript">
function fn(index){
var val = document.getElementById('select_' + index).value;
var _options;
for(var i = index+1 ; i < 4 ; ++i){
_options = document.getElementById('select_' + i).options;
for(var j = 0 ; j < _options.length ; ++j){
if(_options[j].value==val
------解决方案--------------------
( i == 3 && document.getElementById('select_1').value == _options[j].value )){
_options[j].style.display = 'none';
}else{
_options[j].style.display = 'block';
}
}
}
}
</script>
<select id="select_1" onchange="fn(1)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select&n
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
