HTML 基于另一个下拉选择的下拉过滤器

Question

我尝试了基于另一个下拉列表的下拉过滤器，如果我不在选项中的值中使用空格，它就可以工作。 如果我在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='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>

在这里，如果我 select Apple value - Diet 1 ，它正在工作。 如果我 select Diet 2 ，它应该在第二个下拉菜单中显示香蕉和 G 苹果。 请帮助我如何从第一个下拉列表中获取Red Banana值并过滤第二个下拉列表，

Answer 1

你离你不远了，你只是错过了这一行中的单引号：

前：

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

后

 $("#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>

我希望这有帮助

Answer 2

偏向于您的后续问题，这是绑定到数组而不是硬编码的第二个下拉列表的示例

 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>

我希望这有帮助