Question

我使用mixitup.js按国家/地区过滤城市。我想隐藏和显示所选国家/地区的城市。

过滤效果很好，但有没有办法只展示某些国家/地区的城市？这就是我正在处理的问题：Codepen

我发现了这个Fiddle，但如果我有两个以上的选择框，我就不知道如何使用它。例如。 Country > City > Province

Answer 1

你可以做这样的事情

$('#country').change(function(){ // when you change a country
  var country = $(this).val(); // example: .usa OR .france OR .sweden
  $('#city > option').show(); // show all the cities
  if(country){ // if the value is not ""
    $('#city > option[data-country!="'+country+'"]').hide(); // hide the cities of other countries
  }
});

为此，您需要在城市下拉列表中添加国家/地区名称的引用，例如

<select id="country">
  <option value="">Country</option>
  <option value=".usa">USA</option>
  <option value=".sweden">Sweden</option>
  <option value=".france">France</option>
</select>

<select id="city">
  <option value="" data-country=".">City</option>
  <option value=".la" data-country=".usa">LA</option>
  <option value=".ny" data-country=".usa">NY</option>
  <option value=".stockholm" data-country=".sweden">Stockholm</option>
  <option value=".gothenburg" data-country=".sweden">Gothenburg</option>
  <option value=".paris" data-country=".france">Paris</option>
  <option value=".cannes" data-country=".france">Cannes</option>
</select>

这是一个演示 http://codepen.io/anon/pen/QbEYLb

Answer 2

受Dhiraj实施的启发，我创建了一个分层的3类过滤器：http://codepen.io/tuomastik/pen/PPLXwa。我希望有人会发现它很有用！：）

分层结构：

<select id="project">
  <option value="">All</option>
  <option value=".project-1">Project 1</option>
  <option value=".project-2">Project 2</option>
</select>

<select id="dataset">
  <option value="" parent-value=".">All</option>
  <option value=".dataset-a" parent-value=".project-1">Dataset a</option>
  <option value=".dataset-b" parent-value=".project-2">Dataset b</option>
  <option value=".dataset-c" parent-value=".project-2">Dataset c</option>
</select>

<select id="visualization">
  <option value="" parent-value=".">All</option>
  <option value=".visualization-I" parent-value=".dataset-a">Visualization I</option>
  <option value=".visualization-II" parent-value=".dataset-b">Visualization II</option>
  <option value=".visualization-III" parent-value=".dataset-b">Visualization III</option>
  <option value=".visualization-IV" parent-value=".dataset-c">Visualization IV</option>
  <option value=".visualization-V" parent-value=".dataset-c">Visualization V</option>
  <option value=".visualization-VI" parent-value=".dataset-c">Visualization VI</option>
</select>

使用mixitup.js和jQuery隐藏选择列表中的选项

2 个答案: