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

Question

我正在使用 mixitup.js 按国家/地区过滤城市。我想按 selected 国家/地区隐藏和显示城市。

过滤效果很好，但是有什么方法可以只显示特定国家/地区中包含的城市吗？这就是我正在做的事情：Codepen

我找到了这个 Fiddle 但如果我有两个以上的 select 盒子，我不知道如何使用它。例如。 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 隐藏 select 列表中的选项

Hide options in a select list using mixitup.js and jQuery

html

javascript

css

jquery

mixitup