HTML Dropdown filter based on another dropdown selection-CodePudding

I tried dropdown filter based on another dropdown, It's working If I don't use space in the value in option. If I use space in value, then it's not working.

$("#Type").on("change", function() {
  var values = $(this).val().split(',', ) //split value which is selected
  $("#fruits option").hide() //hide all options from slect box
  //loop through values
  for (var i = 0; i < values.length; i  ) {
    var vals = values[i]
    $("#fruits option[value="   vals   "]").show() //show that option

  }
})

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

<div >
  <div >
    <label for="">Department</label>
    <select id="Type" name="Type" class='form-control'>
      <option disabled="disabled" selected="selected">Choose option</option>
      <option value='Apple'>Diet 1</option>
      <option value='Red Banana,Green Apple'>Diet 2</option>
    </select>
    <i ></i>
  </div>

  <div >
    <label for="">Device</label>
    <select id="fruits" name="fruits" class='form-control'>
      <option disabled="disabled" selected="selected">Choose option</option>
      <option value='Apple'>Apple</option>
      <option value='Red Banana'>Banana</option>
      <option value='Green Apple'>G Apple</option>
    </select>
    <i ></i>
  </div>
</div>

Here If I select Apple value - Diet 1, it's working. If I select Diet 2, it should show Banana and G Apple in second drop down. Please help me how to get the Red Banana value from 1st dropdown and filter the second dropdown,

CodePudding user response：

You weren't far off you just missing closing single quotation marts in this line:

before:

 $("#fruits option[value="   vals   "]").show() /

after

 $("#fruits option[value='"   vals   "']").show() /

$("#Type").on("change", function() {
debugger
  var values = $(this).val().split(',', ) //split value which is selected
  $("#fruits option").hide() //hide all options from slect box
  //loop through values
  for (var i = 0; i < values.length; i  ) {
    var vals = values[i]
    $("#fruits option[value='"   vals   "']").show() //show that option

  }
})

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

<div >
  <div >
    <label for="">Department</label>
    <select id="Type" name="Type" class='form-control'>
      <option disabled="disabled" selected="selected">Choose option</option>
      <option value='Apple'>Diet 1</option>
      <option value='Red Banana,Green Apple'>Diet 2</option>
    </select>
    <i ></i>
  </div>

  <div >
    <label for="">Device</label>
    <select id="fruits" name="fruits" class='form-control'>
      <option disabled="disabled" selected="selected">Choose option</option>
      <option value='Apple'>Apple</option>
      <option value='Red Banana'>Banana</option>
      <option value='Green Apple'>G Apple</option>
    </select>
    <i ></i>
  </div>
</div>

I hope this helps

CodePudding user response：

Biased on you follow up question here is an example of the second drop down bound to an array instead of being hard coded

var data = [{
  'value': 'Apple',
  'product': 'Green Apple'
}, {
  'value': 'Grape',
  'product': 'Fresh Grape'
}];

$(function() {
  $.each(data, function(index, itemData) {
    $('#fruits').append($("<option></option>")
      .attr("value", itemData.product)
      .text(itemData.value));
  });
})

$("#Type").on("change", function() {

  var values = $(this).val().split(',', ) //split value which is selected
  $("#fruits option").hide() //hide all options from slect box
  //loop through values
  for (var i = 0; i < values.length; i  ) {
    var vals = values[i]
    $("#fruits option[value='"   vals   "']").show() //show that option

  }
})

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

<div >
  <div >
    <label for="">Department</label>
    <select id="Type" name="Type" class='form-control'>
      <option disabled="disabled" selected="selected">Choose option</option>
      <option value='Fresh Grape'>Diet 1</option>
      <option value='Blue Apple,Green Apple'>Diet 2</option>
    </select>
    <i ></i>
  </div>

  <div >
    <label for="">Device</label>
    <select id="fruits" name="fruits" class='form-control'>
      <option disabled="disabled" selected="selected">Choose option</option>
 
    </select>
    <i ></i>
  </div>
</div>

I hope this helps