第三下拉值依賴於前兩個下拉菜單與jQuery

Question

我有這取決於其他（日期）下面的代碼，其改變一個下拉列表（模板）的值：

<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聯繫表單傳遞。

Answer 1

看看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()); 
}); 

很明顯，我剛剛制定了你的案例作爲例子。