jquery - 筛选类别 根据另一个下拉选项选择下拉菜单

Question

我想根据另一个下拉列表的选择来过滤选项列表。

请看下面的jquery代码；我确信我遗漏了一点点，这就是它不起作用的原因。

if($('#selectionone').is(':selected')){
    $('option').filter('.edibles');   

}
if($('selectiontwo').is(':selected')){
  $('option').filter('.vegfats');
}

Here is the jsfiddle link

Answer 1

这是我根据所选选项添加/删除选项的方法，这适用于大多数浏览器。

我通过添加类来修改 html，首先选择选项，例如

<option class="edibles" value="Edible Oils" id="selectionone">Edible Oils</option>
<option class="vegfats" value="Vegetable Cooking Fats" id="selectiontwo">Vegetable Cooking Fats</option>

JS:

$(document).ready(function () {    
    var allOptions = $('#selectprod option')
    $('#selectcat').change(function () {
        $('#selectprod option').remove(); //remove all options
        var classN = $('#selectcat option:selected').prop('class'); //get the 
        var opts = allOptions.filter('.' + classN); //selected option's classname
        $.each(opts, function (i, j) {
            $(j).appendTo('#selectprod'); //append those options back
        });
    });
});

JSFiddle