Probé el filtro desplegable basado en otro menú desplegable, está funcionando si no uso espacio en el valor en la opción. Si uso space in value , entonces no funciona.
$("#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>Aquí, si selecciono el valor de Apple - Dieta 1 , está funcionando. Si selecciono Diet 2 , debería mostrar Banana y G Apple en el segundo menú desplegable. Ayúdenme a obtener el valor de Red Banana del primer menú desplegable y filtrar el segundo menú desplegable.
No estabas muy lejos, solo te faltaba cerrar mercados de comillas simples en esta línea:
antes de:
$("#fruits option[value=" + vals + "]").show() /después
$("#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>espero que esto ayude
Sesgado en su pregunta de seguimiento, aquí hay un ejemplo del segundo menú desplegable vinculado a una matriz en lugar de estar codificado
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>espero que esto ayude