Question

就像标题所示，我正在尝试创建一个jQuery函数来根据另一个select / option的值过滤选择选项。

到目前为止，我已经设法创建了一个非常适合单次使用的功能，但是当我尝试多次使用它时会中断。

这是我到目前为止所拥有的：

HTML

<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">
        <option class="audi">Select Model</option>
        <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>

        <option class="bmw">Select Model</option>
        <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>

        <option class="mercedes-benz">Select Model</option>
        <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>
    </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">
        <option class="audi">Select Model</option>
        <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>

        <option class="bmw">Select Model</option>
        <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>

        <option class="mercedes-benz">Select Model</option>
        <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>
    </select>
</td>        
</tr>

</table>

的jQuery

 $(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'); 
        });
    });

});

JSFiddle demo

我很感激我能得到的任何帮助！感谢。

Answer 1

使用此Jquery：

$(document).ready(function () { $('.model option').hide(); $('.manufacturer').change(function () { var classN = $(this).find(' option:selected').prop('class'); $(this).parent().parent().find('.model option').hide(); $(this).parent().parent().find('.model option.'+classN).show(); }); });

演示：http://jsfiddle.net/SV4Q8/10/

Answer 2

试试这个：http://jsfiddle.net/lotusgodkk/SV4Q8/13/

我以下列方式修改了你的html。我使用optgroup代替option。我还使用了自定义属性和CSS来减少对jquery的依赖。请检查这是否是您所需要的。

HTML：

<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>

CSS：

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

JS：

$(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');
    });
});

Answer 3

假设您的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();
});

参考我的 LIVE DEMO

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

3 个答案: