在下拉菜單中選擇不同的值時更改dropdown1

Question

這是我想要的

當用戶選擇選項1時，顯示dropdown2。 當用戶選擇選項2時，顯示下拉菜單3。

用戶提交表單後，Option1/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> 

Answer 1

您可以使用disabled屬性來確保您的select之一未被提交。你肯定希望兩個具有不同id S，但如果你給他們同樣的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'); 
} 

Answer 2

只需將相同的名稱屬性添加到兩個dropdownlist，但分配不同的id。 id用於隱藏或顯示dropdownlist，並且在服務器端訪問dropdownlist的值時使用相同的名稱。你可以在formCollection中獲得dropdownlist的值。