jquery - 更改选择框的选项基于另一个选择框上选择的值

Question

考虑两个选择框 A 和 B

A 有选项：car, bike.

B 有选项car1, car2, bike1,bike2

When caris selected Select Box A, then select box B should have only the following options car1andcar2

怎么做？谢谢。

Answer 1

<select id="vehicle">
    <option>car</option>
    <option>bike</option>
</select>

<select id="vehicle-type">
    <option>--</option>
    <option vehicle="car">car1</option>
    <option vehicle="car">car2</option>
    <option vehicle="bike">bike1</option>
    <option vehicle="bike">bike2</option>
</select>

$(function() {
    $('#vehicle').on('change', function() {
        var vehileType = $('#vehicle').val();

        $('#vehicle-type option').hide();
        $('#vehicle-type option[vehicle="'+vehileType+'"]').show();        
    });
});

你可以试试这个 JSFiddle 例子：

http://jsfiddle.net/tt2AD/