过滤器类别选择“基于另一个"下拉选项 [英] Filter Category Select Drop down based on Another drop down option

问题描述

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

I want to filter the list of options based on the selection of another drop down.

请参见下面的jquery代码；我确定有一点点我想念的，这就是为什么它不起作用的原因.

Please see the jquery code below; i am sure there is a tiny bit that i am missing that's why it is not working.

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

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

这是jsfiddle链接

推荐答案

这是我根据选择的选项添加/删除选项的方法，这在大多数浏览器中都适用.

Here is my approach of adding/removing options based on the options selected and this will work in most of browsers.

我通过将类添加到诸如

<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
        });
    });
});

这篇关于过滤器类别选择“基于另一个"下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！