0

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

过滤效果很好，但是有没有办法只显示某些国家/地区的城市？这就是我正在做的事情： Codepen

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

4

2 回答 2

1

受 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>
于 2015-11-19T15:05:37.413 回答
0

你可以做这样的事情

$('#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

于 2015-05-19T14:16:36.843 回答