两个下拉 select 对象，根据 jQuery 中第 1 项的选择禁用第 2 项的某些选项

Question

我在jQuery中有以下功能：

$(function() {
  $('.jqueryOptions').hide();
  $('.AllYearsAllMonths').show();
  $('#year').change(function() {
    if ( $(this).val() == 'AllYears') {
      $('#03','#04','#05').prop("disabled", true);
    } if ( $(this).val() == '2019') {
      $('#01','#02','#03','#04','#05').prop("disabled", true);
    } if ( $(this).val() == '2020') {
      $('#03','#04','#05','#06','#07','#08','#09','#10','#11','#12').prop("disabled", true);
    }
    $('.jqueryOptions').slideUp();
    $("." + $(this).val() + $('#month').val()).slideDown();
  });
  $('#month').change(function() {
    $('.jqueryOptions').slideUp();
    $("." + $('#year').val() + $(this).val()).slideDown();
  });
});

以下HTML select 的函数：

<select id="year">
<option value="AllYears" selected>All Time</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
<select id="month">
<option value="AllMonths" selected>All Months</option>
<option value="Jan" id="#01">januari</option>
<option value="Feb" id="#02">februari</option>
<option value="Mar" id="#03">maart</option>
<option value="Apr" id="#04">april</option>
<option value="May" id="#05">mei</option>
<option value="Jun" id="#06">juni</option>
<option value="Jul" id="#07">juli</option>
<option value="Aug" id="#08">augustus</option>
<option value="Sep" id="#09">september</option>
<option value="Oct" id="#10">oktober</option>
<option value="Nov" id="#11">november</option>
<option value="Dec" id="#12">december</option>
</select>

想法是，到 select 一年，不同的月份子集需要 disabled/enabled。尽管有许多相似但略有不同的示例，但我似乎无法正常工作。

有什么建议吗？我哪里出错了？

（注意：slideup/down 用于其他有效的功能。我确实包含了它，你永远不知道:)）

Answer 1

您的 ID 属性设置为 #01，因此选择器需要为 ##01。这不会很好地工作，因此您需要从 ID 属性中删除 #。请查看代码段：

$(function() {
  //$('.jqueryOptions').hide();
  //$('.AllYearsAllMonths').show();
  $('#year').change(function() {
    var v = $(this).val();
    console.log(v);
    switch (v) {
      case "AllYears":
        console.log("Case 1");
        $("#03, #04, #05").prop("disabled", true);
        break;
      case "2019":
        console.log("Case 2");
        $("#01, #02, #03, #04, #05").prop("disabled", true);
        break;
      case "2020":
        console.log("Case 3");
        $("#03, #04, #05, #06, #07, #08, #09, #10, #11").prop("disabled", true);
        break;
    }
    //$('.jqueryOptions').slideUp();
    //$("." + $(this).val() + $('#month').val()).slideDown();
  });
  $('#month').change(function() {
    //$('.jqueryOptions').slideUp();
    //$("." + $('#year').val() + $(this).val()).slideDown();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="year">
  <option></option>
  <option value="AllYears">All Time</option>
  <option value="2019">2019</option>
  <option value="2020">2020</option>
</select>
<select id="month">
  <option></option>
  <option value="AllMonths">All Months</option>
  <option value="Jan" id="01">januari</option>
  <option value="Feb" id="02">februari</option>
  <option value="Mar" id="03">maart</option>
  <option value="Apr" id="04">april</option>
  <option value="May" id="05">mei</option>
  <option value="Jun" id="06">juni</option>
  <option value="Jul" id="07">juli</option>
  <option value="Aug" id="08">augustus</option>
  <option value="Sep" id="09">september</option>
  <option value="Oct" id="10">oktober</option>
  <option value="Nov" id="11">november</option>
  <option value="Dec" id="12">december</option>
</select>

我还使用了 switch() 语句与许多 if() 语句。在 HTML 中，我添加了一个空白选项。这允许用户实际更改测试的选项之一。

Answer 2

希望对您有所帮助。

$(document).ready(function() {
  $('#year').val('AllYears').change();
});
$('#year').on('change', function() {
  select_option_disable($('#year').val());
});

function select_option_disable(disable_option) {
  var disabled_list = $("#year option[value='" + disable_option + "']").attr('data-disable');
  console.log(disabled_list);
  disabled_list = disabled_list.split(',');
  $("#month option").attr('disabled', false);
  disabled_list.forEach(function(item) {
    $("#month option[value='" + item + "']").attr('disabled', true);
  });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="year">
  <option value="AllYears" data-disable="Mar,Apr,May" selected>All Years</option>
  <option value="2019" data-disable="Jan,Feb,Mar">2019</option>
  <option value="2020" data-disable="Apr,May,Jun">2020</option>
</select>
<select id="month">
  <option value="AllMonths" selected>All Months</option>
  <option value="Jan" id="#01">januari</option>
  <option value="Feb" id="#02">februari</option>
  <option value="Mar" id="#03">maart</option>
  <option value="Apr" id="#04">april</option>
  <option value="May" id="#05">mei</option>
  <option value="Jun" id="#06">juni</option>
  <option value="Jul" id="#07">juli</option>
  <option value="Aug" id="#08">augustus</option>
  <option value="Sep" id="#09">september</option>
  <option value="Oct" id="#10">oktober</option>
  <option value="Nov" id="#11">november</option>
  <option value="Dec" id="#12">december</option>
</select>

两个下拉 select 对象，根据 jQuery 中第 1 项的选择禁用第 2 项的某些选项

Two dropdown select objects, disable some options of no 2 dependent on choice in no 1 in jQuery

jquery

select

prop