Question

这就是我想要的

当用户选择选项1时，显示dropdown2。当用户选择选项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

只需将同名属性添加到两个下拉列表中，但指定不同的ID。 id对于隐藏或显示下拉列表非常有用，并且相同名称对于访问服务器端下拉列表的值很有用。你可以在formCollection中获得dropdownlist的值。

Answer 2

您可以使用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'); 
}

在dropdown1中选择不同的值时更改下拉列表2

2 个答案: