根據另一個下拉菜單的選擇，我怎樣纔能有一個下拉菜單隱藏/顯示？

Question

我有一個聯繫表單，有一個下拉式引薦來源。如果Magazine從推介來源中選擇，我想要顯示另一個雜誌的隱藏下拉菜單。如果選擇另一個選項作爲推介來源，我希望雜誌列表消失。到目前爲止，我有以下的（弱醬）的JavaScript：

function showObject(id) { 
    document.getElementById(id).style.display = 'block'; 
} 
function hideObject(id) { 
    document.getElementById(id).style.display = 'none'; 
} 

而下面的HTML（表格的一部分）：

<label>Referral Source </label> 
<select class="contact-input-dropdown"> 
    <option value="">Select One (Required)</option> 
    <option value="Email from Us">Email from Us</option> 
    <option value="Friend or Associate">Friend or Associate</option> 
    <option value="Flyer/Mailing">Flyer/Mailing</option> 
    <option value="Magazine">Magazine</option> 
    <option value="Online Search Engine">Online Search Engine</option> 
    <option value="Tradeshow">Tradeshow</option> 
    <option value="Social Media">Social Media</option> 
</select> 
<br> 
<label id="magazine-label" style="display:none">Magazine</label> 
<select id="magazine" class="contact-input-dropdown" style="display:none;" name="magazine"> 
    <option value="Not Specified">Select One</option> 
    <option value="X Management">X Management</option> 
    <option value="Test Mag 1">Test Mag 1</option> 
    <option value="Test Mag 2">Test Mag 2</option> 
    <option value="Test Mag 3">Test Mag 3</option> 
</select> 

我要檢查時，它已經改變了連結來源，顯示如果選擇Magazine，則選擇雜誌輸入;如果未選擇Magazine，則選擇隱藏。

Answer 1

使用JavaScript函數，你可以做以下的（你可以打破它到它自己的功能，如果你想）：

onchange="if(this.options[this.selectedIndex].value == 'Magazine') { showObject('magazine'); } else { hideObject('magazine'); }" 

在您的代碼：

<label<?php echo (strpos($errors,'referralsource')?' class="error"':''); ?>>Referral Source </label> 
<select name="referral-source" class="contact-input-dropdown" onchange="if(this.options[this.selectedIndex].value == 'Magazine') { showObject('magazine'); } else { hideObject('magazine'); }"> 
    <option value="">Select One (Required)</option> 
    <option value="Email from CleanTelligent"<?php echo ($referralsource =='Email from CleanTelligent' || $offer=='holiday-pricing'?' SELECTED':'');?>>Email from CleanTelligent</option> 
    <option value="Friend or Associate"<?php echo ($referralsource =='Friend or Associate'?' SELECTED':'');?>>Friend or Associate</option> 
    <option value="Flyer/Mailing"<?php echo ($referralsource =='Flyer/Mailing'?' SELECTED':'');?>>Flyer/Mailing</option> 
    <option value="Magazine"<?php echo ($referralsource =='Magazine'?' SELECTED':'');?>>Magazine</option> 
    <option value="Online Search Engine"<?php echo ($referralsource =='Online Search Engine'?' SELECTED':'');?>>Online Search Engine</option> 
    <option value="Tradeshow"<?php echo ($referralsource =='Tradeshow'?' SELECTED':'');?>>Tradeshow</option> 
    <option value="thejanitorialstore.com"<?php echo ($referralsource =='thejanitorialstore.com'?' SELECTED':'');?>>theJanitorialStore.com</option> 
    <option value="Social Media"<?php echo ($referralsource =='Social Media'?' SELECTED':'');?>>Social Media</option> 
</select><br> 
<label>Magazine</label> 
<select name="magazine" class="contact-input-dropdown" id="magazine"> 
    <option value="Not Specified">Select One</option> 
    <option value="CM Management"<?php echo ($interest =='CM Management'?' SELECTED':'');?>>CM Management</option> 
    <option value="Test Mag 1"<?php echo ($interest =='Test Mag 1'?' SELECTED':'');?>>Test Mag 1</option> 
    <option value="Test Mag 2"<?php echo ($interest =='Test Mag 2'?' SELECTED':'');?>>Test Mag 2</option> 
    <option value="Test Mag 3"<?php echo ($interest =='Test Mag 3'?' SELECTED':'');?>>Test Mag 3</option> 
</select> 

Answer 2

如果您在一個PHP服務器，你可以使用它的Ajax，這將是最有效的方法。

將使用document.getElementByID的值傳遞給ajax調用，然後根據第一個元素的選擇動態更改第二個元素的內容。

爲了節省編碼它在這裏這是一個偉大的教程進程的鏈接。

http://thejoysofcomputing.wordpress.com/2010/02/19/change-a-drop-down-when-other-changes-in-ajax-way/