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>