第三下拉值依赖于前两个下拉菜单与jQuery
问题描述:
我有这取决于其他(日期)下面的代码,其改变一个下拉列表(模板)的值:第三下拉值依赖于前两个下拉菜单与jQuery
<select name="date" id="date">
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
<select name="time" id="time">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<select name="template" id="template">
<option value="A">Template A</option>
<option value="B">Template B</option>
<option value="C">Template C</option>
</select>
<script type="text/javascript">
var templateA = ["11","12"]; //dates that use template A
var templateB = ["13","14"]; //dates that use template B
jQuery('#date').change(function() {
if (jQuery.inArray(jQuery(this).val(), templateA) != -1) {
jQuery("#template").val("A");
} else if (jQuery.inArray(jQuery(this).val(), templateB) != -1) {
jQuery("#template").val("B");
}
});
</script>
我想包括第三次下拉'时间',所以模板依赖于日期和时间。例如,如果date = 12和time = pm,则template = b,但如果date = 12且time = am,则template = a。
在这里有大量的帖子关于两个下拉列表,但我找不到三个。
“模板”下拉菜单将被隐藏,所有这三项都通过wordpress联系表单传递。
答
看看this jsFiddle。它的长短之处在于,您使用一种方法来决定给定日期和时间值的模板。然后,您只需拥有两个更改监听器,并使用适当的日期和时间调用该方法以更改模板值。
var templateA = ["11", "12"]; //dates that use template A
var templateB = ["13", "14"]; //dates that use template B
function calculateTemplate(date, time) {
if (jQuery.inArray(date, templateA) != -1 && time === 'AM') {
jQuery('#template').val('A');
} else if (jQuery.inArray(date, templateA) != -1 && time === 'PM') {
jQuery('#template').val('B');
} else if (jQuery.inArray(date, templateB) != -1 && time === 'AM') {
jQuery('#template').val('B');
} else if (jQuery.inArray(date, templateB) != -1 && time === 'PM') {
jQuery('#template').val('C');
}
}
jQuery('#date').change(function() {
calculateTemplate(jQuery(this).val(), jQuery('#time').val());
});
jQuery('#time').change(function() {
calculateTemplate(jQuery('#date').val(), jQuery(this).val());
});
很明显,我刚刚制定了你的案例作为例子。
感谢@BeRecursive,在jsFiddle中工作,但不在wordpress中。任何想法为什么? – TheTallOne 2013-02-11 18:14:17