第三个下拉值取决于jquery的前两个下拉值

Third dropdown value dependant on first two dropdowns with jquery

本文关键字：两个 取决于 三个 jquery      更新时间：2023-09-26

我有以下代码，它根据另一个（日期）更改一个下拉列表（模板）的值：

<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>

我试图包含第三个"时间"下拉列表，因此模板取决于日期和时间。例如，如果日期=12，时间=pm，则template=b，但如果日期=13，时间=am，则template=a。

这里有很多关于两次下降的帖子，但我找不到三次。

"模板"下拉列表将被隐藏，三者都将在wordpress联系人表单中通过。

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

很明显，我只是把你的案例作为一个例子。

相关文章：