How to hide select option based on option selected in the first selection-CodePudding

I have two selection dropdown. User have to select the category first, than the sub category option will be displayed based on the first selection. If user pick category with value 3 it will display the sub category with option value of 1, 2 , 3. Option value of 0 will be hide/ remove in the sub category.

And if user pick category with option 0||1||2 it will only display other in the sub category option.

How do I achieve this. Do I have to use hide function to hide the value ?

$('#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>

This is what I have tried but its not working

CodePudding user response：

I will get #category value and run for each option to show/hide depending on cat value.

You can use the below demo:

$('#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>

CodePudding user response：

Your JS code must look like this.

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