0

次のコードがあり、一方のドロップダウン（テンプレート）の値をもう一方のドロップダウン（日付）に応じて変更します。

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

'time'の3番目のドロップダウンを含めようとしているので、テンプレートは日付と時刻に依存します。たとえば、日付=12および時刻=pm、テンプレート= bの場合、日付=12および時刻=amの場合、テンプレート=aです。

ここには2つのドロップダウンに関する投稿がたくさんありますが、3つは見つかりませんでした。

「テンプレート」ドロップダウンは非表示になり、3つすべてがワードプレスの連絡フォームに渡されます。

4

1 に答える 1

2

この jsFiddleを見てください。要するに、メソッドを使用して、日付と時刻の値を指定してどのテンプレートを選択するかを決定することです。次に、2 つの変更リスナーを用意し、テンプレートの値を変更するために適切な日付と時刻でそのメソッドを呼び出します。

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

明らかに、私は例としてあなたのケースを作り上げました。

于 2013-02-11T17:21:30.117 に答える