jQuery on select - multi select - 在 div 中更改结果

Question

我想在 select/multi select 更改后使用 div 中的 jQuery 得到不同的结果。有两个 select 输入。

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

示例select：

<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

据我所知，您的意思是您想根据多个 select 输入进行过滤。在用户体验方面，最好让 2 selector 一起工作，而不是让第二个覆盖第一个 selection 的汽车。 See this fiddle for functionality。请注意，我已经修复了第二个 select 或者，正如他们所说的 "Truck" 而不是 "track".

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>

jQuery on select - multi select - 在 div 中更改结果

jQuery on select - multi select - change result in divs

jquery

select

onchange