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,
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
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