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/

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

2 个答案: