[英]How can I have one dropdown hide/show depending on the selection of another dropdown?
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. 如果从推荐来源中选择Magazine
,我想显示该杂志的另一个隐藏的下拉菜单。如果随后为推荐来源选择另一个选项,我希望杂志列表消失。 So far I have the following (weak sauce) JavaScript: 到目前为止,我有以下(弱酱)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): 以及以下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>
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. 我要检查时,它已经改变了连结来源,展现了杂志的输入,如果Magazine
选择,或隐藏它,如果Magazine
是没有选择。
Using your javascript functions you can do the following (you can break it out into its own function if you want): 使用javascript函数,您可以执行以下操作(如果需要,可以将其分解为自己的函数):
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>
If you are on a PHP server you could use ajax for it which would be the most efficient method. 如果您在PHP服务器上,则可以使用ajax,这将是最有效的方法。
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. 使用document.getElementByID将值传递给ajax调用,然后根据第一个元素的选择动态地更改第二个元素的内容。
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/ http://thejoysofcomputing.wordpress.com/2010/02/19/change-a-drop-down-when-other-changes-in-ajax-way/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.