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

Question

这就是我想要的

当用户选择选项 1 时，显示下拉菜单 2。当用户选择选项 2 时，显示 dropdown3。

用户提交表单后，Option1/2 和从 dropdown2/3 中选择的值应该可用。

我尝试过的:我保持ID不变，但是隐藏/显示变得很棘手。保持 ID 不同，隐藏/显示很容易，但是表单提交会提交 dropdown2/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>

Answer 1

您可以使用 disabled 属性来确保您的其中一个 select 未提交。您肯定希望两者具有不同的 id，但如果您给它们相同的 name，并禁用其中一个，则只会提交一个:

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'); 
}