Question 37217 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

HTML Dropdown filter based on another dropdown selection – Jquery

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 class="form-row last">
  <div class="form-wrapper">
    <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 class="zmdi zmdi-chevron-down"></i>
  </div>

  <div class="form-wrapper">
    <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 class="zmdi zmdi-chevron-down"></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,

Tags:

2

Answers


  1. 0

    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 class="form-row last">
  <div class="form-wrapper">
    <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 class="zmdi zmdi-chevron-down"></i>
  </div>

  <div class="form-wrapper">
    <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 class="zmdi zmdi-chevron-down"></i>
  </div>
</div>

    I hope this helps

    Login or Signup to reply.
  2. 0

    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 class="form-row last">
  <div class="form-wrapper">
    <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 class="zmdi zmdi-chevron-down"></i>
  </div>

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

    I hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search