Javascript 在dropdown1中选择不同值时更改dropdown2

这是我想要的

当用户选择选项1时，显示下拉列表2。 当用户选择选项2时，显示下拉列表3

用户提交表单后，选项1/2和从下拉列表2/3中选择的值应可用

我尝试过的：我保持了相同的ID，但是隐藏/显示变得很棘手。 保持ID不同，隐藏/显示很容易，但表单提交提交两个下拉列表2/3的值

<script type="text/JavaScript">    
    function show(id) {  
        if (document.getElementById(id).style.display == 'none') {  
            document.getElementById(id).style.display = '';  
        }  
    }  

    function hide(id) {  
        document.getElementById(id).style.display = 'none';  
    }    
</script>

<form  action="showdetails.php" method="post">
  <select class="dropdown1" name="desire">
    <option selected="selected" onclick="show('ID1');hide('id2');">Option 1</option>
    <option onclick="hide('ID1');show('ID2');">Option 2</option>
  </select>
  <select id="dropdown2" class="dropdown" name="action">
    <option selected="selected">Value1</option>
    <option>Value 2</option>
    <option>Value 3</option>
  </select>
  <select id="dropdown3" class="dropdown" name="action" >
    <option>Room</option>
  </select>
  <input type="submit" id="submit" title="Go"/>
</form>

函数显示（id）{
if（document.getElementById（id）.style.display=='none'）{
document.getElementById（id）.style.display=''；
}  
}  
函数隐藏（id）{
document.getElementById（id）.style.display='none'；
}    
选择1
选择2
价值1
价值2
价值3
房间

只需将相同的名称属性添加到两个dropdownlist，但分配不同的id。id用于隐藏或显示dropdownlist，相同的名称用于访问服务器端的dropdownlist值。您可以在formCollection中获取dropdownlist的值。

您可以使用

disabled

属性来确保您的

select

之一未提交。您肯定希望两者具有不同的

id

s，但如果您为它们指定相同的

名称，并禁用其中一个，则只会提交一个：

function show(id) { 
    var dropdown = document.getElementById(id); 
    if (dropdown.style.display == 'none') {  
        dropdown.style.display = '';
        dropdown.removeAttribute('disabled');  
    }  
}  

function hide(id) {  
    var dropdown = document.getElementById(id); 
    dropdown.style.display = 'none'; 
    dropdown.setAttribute('disabled', 'disabled'); 
}