过滤器类别根据另一个下拉选项选择下拉列表

Question

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

请参阅下面的jquery代码; 我确信有一点点我错过了,这就是为什么它不起作用.

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

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

这是jsfiddle链接

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