基于另一个选择的可重用jQuery选择/选项过滤器

正如标题所示，我试图创建一个jQuery函数，根据另一个select/option的值过滤select选项

到目前为止，我已经成功地创建了一个函数，该函数在单次使用时效果很好，但当我尝试多次使用它时，它就会中断

以下是我目前掌握的情况：

HTML

如果能帮上忙，我将不胜感激
谢谢。

使用此Jquery：

$（文档）.ready（函数（）{
$（'.model option'）.hide（）；
$（'.manufacturer'）。更改（函数（）{
var classN=$（this）.find（'option:selected'）.prop（'class'）；
$（this.parent（）.parent（）.find（'.model option'）.hide（）；
$（this.parent（）.parent（）.find（'.model option.'+classN）.show（）；
});
});

演示：
试试这个：

我用以下方式修改了你的html。我使用了
optgroup
而不是
选项
。我还使用了自定义属性和CSS，这减少了对jquery的依赖。请检查这是否是您需要的

HTML:

JS:

假设您的HTML永不更改，下面是最好的实现

$('.manufacturer').change(function () {
    var modelObj = $(this).parent().next().children(".model");
    var selector = "option[class="+this.value.toLowerCase()+"]";
    modelObj.children(":not("+selector+")").hide();
    modelObj.children(selector).show();
});

请参阅我的
谢谢您的输入，但此解决方案不兼容跨浏览器。。。我尝试过显示/隐藏，但在
选项上使用
显示：无
元素在大多数浏览器中不起作用不是我需要的。。。我需要根据所选制造商对车型进行筛选。谢谢
 $(document).ready(function () {

    var allOptions = $('.model option');    
    $('.manufacturer').change(function () {

        $('.model option').remove();
        var classN = $('.manufacturer option:selected').prop('class');
        var opts = allOptions.filter('.' + classN);
        $.each(opts, function (i, j) {
            $(j).appendTo('.model'); 
        });
    });

});

<table>
    <tr class='car-selection'>
        <td class='label'>Car 1:</td>
        <td>Manufacturer:
            <select class="manufacturer">
                <option>Select Manufacturer</option>
                <option class="audi" value="Audi">Audi</option>
                <option class="bmw" value="BMW">BMW</option>
                <option class="mercedes-benz" value="Mercedes-Benz">Mercedes-Benz</option>
            </select>
        </td>
        <td>Model:
            <select class="model">
                <optgroup class="audi" label="Select Model">
                    <option value="a1" class="audi">A1</option>
                    <option value="a3" class="audi">A3</option>
                    <option value="a4" class="audi">A4</option>
                    <option value="a5" class="audi">A5</option>
                    <option value="a6" class="audi">A6</option>
                </optgroup>
                <optgroup class="bmw" label="Select Model">
                    <option value="1series" class="bmw">1 Series</option>
                    <option value="3series" class="bmw">3 Series</option>
                    <option value="5series" class="bmw">5 Series</option>
                    <option value="7series" class="bmw">7 Series</option>
                    <option value="x5" class="bmw">X5</option>
                </optgroup>
                <optgroup class="mercedes-benz" label="Select Model">
                    <option value="aclass" class="mercedes-benz">A-Class</option>
                    <option value="bclass" class="mercedes-benz">B-Class</option>
                    <option value="cclass" class="mercedes-benz">C-Class</option>
                    <option value="eclass" class="mercedes-benz">E-Class</option>
                    <option value="mclass" class="mercedes-benz">M-Class</option>
                </optgroup>
            </select>
        </td>
    </tr>
    <tr class='car-selection'>
        <td class='label'>Car 2:</td>
        <td>Manufacturer:
            <select class="manufacturer">
                <option>Select Manufacturer</option>
                <option class="audi" value="Audi">Audi</option>
                <option class="bmw" value="BMW">BMW</option>
                <option class="mercedes-benz" value="Mercedes-Benz">Mercedes-Benz</option>
            </select>
        </td>
        <td>Model:
            <select class="model">
                <optgroup class="audi" label="Select Model">
                    <option value="a1" class="audi">A1</option>
                    <option value="a3" class="audi">A3</option>
                    <option value="a4" class="audi">A4</option>
                    <option value="a5" class="audi">A5</option>
                    <option value="a6" class="audi">A6</option>
                </optgroup>
                <optgroup class="bmw" label="Select Model">
                    <option value="1series" class="bmw">1 Series</option>
                    <option value="3series" class="bmw">3 Series</option>
                    <option value="5series" class="bmw">5 Series</option>
                    <option value="7series" class="bmw">7 Series</option>
                    <option value="x5" class="bmw">X5</option>
                </optgroup>
                <optgroup class="mercedes-benz" label="Select Model">
                    <option value="aclass" class="mercedes-benz">A-Class</option>
                    <option value="bclass" class="mercedes-benz">B-Class</option>
                    <option value="cclass" class="mercedes-benz">C-Class</option>
                    <option value="eclass" class="mercedes-benz">E-Class</option>
                    <option value="mclass" class="mercedes-benz">M-Class</option>
                </optgroup>
            </select>
        </td>
    </tr>
</table>

td.label {
    font-weight: bold;
}
.model * {
    display:none;
}
select[data-class="audi"] .audi {
    display:block;
}
select[data-class="bmw"] .bmw {
    display:block;
}
select[data-class="mercedes-benz"] .mercedes-benz {
    display:block;
}
select[data-class="audi"] .audi {
    display:block;
}

$(document).ready(function () {
    $('.manufacturer').change(function () {
        var s = $(this);
        var val = s.val().toLowerCase();
        var nextSelect = s.parents('td:first').next('td:first').find('.model:first');
        nextSelect.attr('data-class', val);
        nextSelect.find('option.' + val).attr('selected', 'selected');
    });
});

$('.manufacturer').change(function () {
    var modelObj = $(this).parent().next().children(".model");
    var selector = "option[class="+this.value.toLowerCase()+"]";
    modelObj.children(":not("+selector+")").hide();
    modelObj.children(selector).show();
});