如何根据第一次选择中选择的选项隐藏选择选项

Question

我有两个选择下拉菜单。用户必须先选择类别，然后根据第一次选择显示子类别选项。 如果用户选择值为3 的类别，它将显示选项值为1, 2 , 3 的子类别。 0 的选项值将在 sub category 中隐藏/删除。

如果用户选择带有选项0||1||2 的类别，它只会在子类别选项中显示other。

我如何做到这一点。我必须使用隐藏功能来隐藏值吗？

$('#category').change(function() {
  let cat = $(this).val();

  if (cat === '0' || cat === '1' || cat === '2') {
    console.log("other");
    $("#sub_category").change(function() {

      $('#sub_category').children('option[value="1"]').hide();
      $('#sub_category').children('option[value="2"]').hide();
      $('#sub_category').children('option[value="3"]').hide();
    });


  } else {

    $("#sub_category").change(function() {

      $('#sub_category').children('option[value="0"]').hide();
    })
    console.log(cat);
  }
});

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

<select name="category" id="category">
  <option value="0">Type A</option>
  <option value="1">Type B</option>
  <option value="2">Type C</option>
</select>

<select name="sub_category" id="sub_category">
  <option value="" hidden>Select Sub Category</option>
  <option value="0">Other</option>
  <option value="1">Op1</option>
  <option value="2">Op2</option>
  <option value="3">Op3</option>

</select>

这是我尝试过的，但它不起作用

Answer 1

我将获得 #category 值并运行每个选项以根据 cat 值显示/隐藏。

您可以使用下面的演示：

$('#category').change(function() {
  $("#sub_category").val('');
  let cat = $(this).val();
  $("#sub_category option").show();
  if (cat == 3) {
    $("#sub_category option").each(function (index, item) {
       var value = parseInt($(item).val());
       if ([0].includes(value)) {
          $(item).hide();
       }
    });
  } else {
    $("#sub_category option").each(function (index, item) {
       var value = parseInt($(item).val());
       if ([1, 2, 3].includes(value)) {
          $(item).hide();
       }
    });
  }
});

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

<select name="category" id="category">
  <option value="0">Type A</option>
  <option value="1">Type B</option>
  <option value="2">Type C</option>
  <option value="3">Value 3</option>
</select>

<select name="sub_category" id="sub_category">
  <option value="">Select Sub Category</option>
  <option value="0">Other</option>
  <option value="1">Op1</option>
  <option value="2">Op2</option>
  <option value="3">Op3</option>

</select>

Answer 2

您的 JS 代码必须如下所示。

$('#category').change(function(e) {
  let cat = e.currentTarget.value;

  if (cat === '0' || cat === '1' || cat === '2') {
    $('#sub_category').children('option[value="0"]').show();
      $('#sub_category').children('option[value="1"]').hide();
      $('#sub_category').children('option[value="2"]').hide();
      $('#sub_category').children('option[value="3"]').hide();

  } else {
      $('#sub_category').children('option[value="1"]').show();
      $('#sub_category').children('option[value="2"]').show();
      $('#sub_category').children('option[value="3"]').show();
      $('#sub_category').children('option[value="0"]').hide();
      console.log(cat);
  }
});