JS一个下拉选择框控制其他几个下拉选择框（急，在线等）

wz_sishuiwuhen 2011-08-11 05:39:59

有一个总的下拉先择框 Name 里面有1，2，3，三个值，选中值为1的时候，名字为"name1"的下拉框可以选择，"name2"和"name3"这两个选择框变灰，同样的，"Name"再重新选中值为2的时候，"name2"又可以重新选择，其他两个不能再选择，同样3也是如此。
Name.value=1,name1.disabled=false,name2.disabled=true,name3.disabled=true;
页面不刷新，再重新选择Name时：
Name.value=2,name2.disabled=false,name1.disabled=true,name3.disabled=true;
同样的：
Name.value=3,name3.disabled=false,name2.disabled=true,name2.disabled=true;

<select name="Name" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="name1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="name2" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="name3" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

...全文

137 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

wz_sishuiwuhen 2011-08-12

打赏
举报

感谢上面两位，问题解决啦。

乌镇程序员 2011-08-11

打赏
举报

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

window.onload = function() {

	var obj = document.getElementsByTagName('select');

	var val = obj[0].value;

	for(var i = 1; i < obj.length; i ++) if (obj[i].name == 'name' + val) obj[i].disabled = true;

	obj[0].onchange = function() {

		var val = this.value;

		for(var i = 1; i < obj.length; i ++) {

			if (obj[i].name != 'name' + val) obj[i].disabled = false;

			else obj[i].disabled = true;

		}

	}

}

</script>

</head>



<body>

    <select name="Name">  

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

    <select name="name1">  

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

    <select name="name2">  

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

    <select name="name3">

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

</body>

</html>

wz_sishuiwuhen 2011-08-11

打赏
举报

[Quote=引用 1 楼 t5500 的回复:]

HTML code
<!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-equi……
[/Quote]
那如果<select>的name是不固定的呢，而且如果Name的值为1的时候，name1和name2可选，name3不可选;当Name的值为2的时候，name1和name3可选，name2不可选；值为3时，只有name1不可选。也就是说Name值不同时，name1，name2,name3的可选的数量不固定。怎么办呢？

MuBeiBei 2011-08-11

打赏
举报

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>





<form name="f">

<select name="Name" >  

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<select name="name1" disabled>  

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<select name="name2" disabled>  

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

<select name="name3" disabled>  

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

</select>

</form>

<script>

	document.f.Name.onclick = function(){

		var value = this[this.selectedIndex].value;

		

		if(value == 1){

			document.f.name1.disabled = '';	

			document.f.name2.disabled = 'disabled';

			document.f.name3.disabled = 'disabled';

		}else if(value == 2){

			document.f.name2.disabled = '';	

			document.f.name1.disabled = 'disabled';

			document.f.name3.disabled = 'disabled';	

		}else if(value == 3){

			document.f.name3.disabled = '';	

			document.f.name1.disabled = 'disabled';

			document.f.name2.disabled = 'disabled';		

		}

	};

</script>

</body>

</html>

乌镇程序员 2011-08-11

打赏
举报

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

window.onload = function() {

	var obj = document.getElementsByTagName('select');

	obj[0].onchange = function() {

		var val = this.value;

		for(var i = 1; i < obj.length; i ++) {

			if (obj[i].name == 'name' + val) obj[i].disabled = false;

			else obj[i].disabled = true;

		}

	}

}

</script>

</head>



<body>

    <select name="Name">  

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

    <select name="name1">  

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

    <select name="name2" disabled="disabled">  

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

    <select name="name3" disabled="disabled">

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

    </select>

</body>

</html>