How can I have one dropdown hide/show depending on the selection of another dropdown?

Question

I have a contact form that has a drop-down for referral source. If Magazine is selected from referral source, I want to show another, hidden drop-down menu for which magazine, If another option is then selected for referral source, I want the magazine list to disappear. So far I have the following (weak sauce) JavaScript:

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

And the following HTML (part of a form):

<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>

I want to check the Referral Source whenever it's changed, show the Magazine input if Magazine was chosen, or hide it if Magazine was not chosen.

Answer 1

Using your javascript functions you can do the following (you can break it out into its own function if you want):

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

In your code:

<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

If you are on a PHP server you could use ajax for it which would be the most efficient method.

Pass a value using document.getElementByID to the ajax call and then dynamically change the content of the second element based on the selection of the first.

To save on coding it in here this is a link to a great tutorial for the process.

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