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

有一个总的下拉先择框 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>

解决方案 »

  1.   

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

  2.   

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

  3.   

    那如果<select>的name是不固定的呢，而且如果Name的值为1的时候，name1和name2可选，name3不可选;当Name的值为2的时候，name1和name3可选，name2不可选；值为3时，只有name1不可选。也就是说Name值不同时，name1，name2,name3的可选的数量不固定。怎么办呢？
      

  4.   

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