0

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,

Improve this question

2 Answers 2

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

np problem happy to help
I have a list [{'value': 'Apple', 'product': 'Green Apple'},{'value': 'Grape', 'product': 'Fresh Grape'}] I want to use this list in fruits id (2nd dropdown) instead manual values. Can you support I used this for loop but no luck {% for data in product_name %} <option value={{data.value}}>{{data.product}}</option> {% endfor %}
yes its possible please see the new answer for an example
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

Improve this answer

4 Comments

Great, But my list var data is in views.py, Please guide me how to import that list inside <script> in html?
im not familiar with django or Python code but i would guess you would create a html template that had the array inside a script tag and use the views.py to render that , but as its not a languare I have ever used you may want to post another question on SO with the tag Python sorry
Thanks for your help, I managed to get resolve the issue :)
ah ok glad you were able to work it out

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.