jQuery上的选择 - 多选择 - 改变结果divs

Question

我想在选择/多选择更改后在div中使用jQuery有不同的结果。有两个选择输入。

如何显示在没有双轨没有轨道的所有汽车？ 如何更改汽车更换结果以显示可用轨迹 然后更改轨迹以显示可用汽车。 或者任何不同的解决方案？有些汽车只适用于某些轨道。

实施例中进行选择：

<select id="cars" class="car-select"> 
    <option value="0">Choose a car</option> 
    <option value="1">Car1</option> 
    <option value="2">Car2</option> 
</select> 
<select id="tracks" class="track-select"> 
    <option value="0">All tracks</option> 
    <option value="1">Track 1 Only for Car1</option> 
    <option value="2">Track 2 Only for Car1</option> 
    <option value="3">Track 3 Only for Car2</option> 
    <option value="4">Track 4 Only for Car2</option> 
    <option value="5">Track 5 Only for Car1</option> 
</select> 


<div id="results"></div> 

数据进行排序：

<div id="allcars"> 
<div class="Car1 track1"> 
<div>Car 1</div><div>Track 1</div></div> 

<div class="Car1 track2"> 
<div>Car 1</div><div>Track 1</div></div> 

<div class="Car1 track3"> 
<div>Car 1</div><div>Track 2</div></div> 

<div class="Car1 track4"> 
<div>Car 1</div><div>Track 3</div></div> 

<div class="Car2 track1"> 
<div>Car 2</div><div>Track 1</div></div> 

<div class="Car2 track2"> 
<div>Car 2</div><div>Track 2</div></div> 

<div class="Car2 track3"> 
<div>Car 2</div><div>Track 3</div></div> 

<div class="Car2 track5"> 
<div>Car 2</div><div>Track 5</div></div> 
</div> 

任何的jsfiddle例子请。

Answer 1

最好我可以告诉你，你的意思是你想要基于多个选择输入过滤。用UX来说，最好让两个选择器一起工作，而不是第二个选择器重写第一个选择器。 See this fiddle for functionality。请注意，我已经修复了第二个选择器，因为他们说“卡车”而不是“轨道”。

JS：

$('#cars, #tracks').on('change', function() { 
    function showall() { 
    $('#results div').show(); 
    } 

    var car_val = +$('#cars').val(), 
    track_val = +$('#tracks').val(); 
    if (car_val === 0 && track_val == 0) { 
    showall(); 
    return; 
    } 

    var selector = (car_val > 0 ? '.Car' + car_val : '') + (track_val > 0 ? '.track' + track_val : ''); 
    console.log(selector); 

    $('#results>div:not(' + selector + ')').hide(); 
    $(selector).show(); 
}); 

HTML：

<select id="cars" class="car-select"> 
    <option value="0">Choose a car</option> 
    <option value="1">Car1</option> 
    <option value="2">Car2</option> 
</select> 
<select id="tracks" class="track-select"> 
    <option value="0">All tracks</option> 
    <option value="1">Track 1</option> 
    <option value="2">Track 2</option> 
    <option value="3">Track 3</option> 
</select> 


<div id="results"> 
    <div class="Car1 track1"> 
    <div>Car 1</div> 
    <div>Track 1</div> 
    </div> 

    <div class="Car1 track2"> 
    <div>Car 1</div> 
    <div>Track 2</div> 
    </div> 

    <div class="Car1 track3"> 
    <div>Car 1</div> 
    <div>Track 3</div> 
    </div> 

    <div class="Car1 track4"> 
    <div>Car 1</div> 
    <div>Track 4</div> 
    </div> 

    <div class="Car2 track1"> 
    <div>Car 2</div> 
    <div>Track 1</div> 
    </div> 

    <div class="Car2 track2"> 
    <div>Car 2</div> 
    <div>Track 2</div> 
    </div> 

    <div class="Car2 track3"> 
    <div>Car 2</div> 
    <div>Track 3</div> 
    </div> 

    <div class="Car2 track5"> 
    <div>Car 2</div> 
    <div>Track 5</div> 
    </div> 
</div>