Как я могу сделать один раскрывающийся список скрыть / показать в зависимости от выбора другого раскрывающегося списка?

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

Если вы находитесь на PHP-сервере, вы можете использовать для него ajax, который будет наиболее эффективным методом.

Передайте значение с помощью document.getElementByID в вызов ajax, а затем динамически измените содержимое второго элемента на основе выбора первого.

Чтобы сэкономить на кодировании, здесь есть ссылка на отличный учебник по процессу.

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

Answer 2

Используя ваши функции 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>