如何根据另一个下拉菜单的选择来隐藏/显示一个下拉菜单？答案

【问题标题】：How can I have one dropdown hide/show depending on the selection of another dropdown?如何根据另一个下拉菜单的选择来隐藏/显示一个下拉菜单？
【发布时间】：2011-12-31 13:34:23
【问题描述】：

我有一个联系表单，其中包含推荐来源的下拉菜单。如果从推荐来源选择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，则隐藏它。

【问题讨论】：

发布呈现的 HTML，而不是 HTML-with-bits-of-PHP-in-it；因为当涉及到 JavaScript 时，PHP 已经被处理，只剩下 HTML。

标签： javascript html forms dom

【解决方案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>

【讨论】：

真是一团糟。请勿内联添加侦听器，即使在示例中也是如此。

【解决方案2】：

如果您在 PHP 服务器上，您可以使用 ajax，这将是最有效的方法。

使用 document.getElementByID 将值传递给 ajax 调用，然后根据第一个元素的选择动态更改第二个元素的内容。

为了节省在这里的编码，这是一个链接到一个很好的过程教程。

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

【讨论】：