在过滤时产生“全部”数据类别导致第二个下拉菜单（jQuery）[重复]

Question

这个问题在这里已有答案：

• Show Hide select options based on previous selection dropdown in Jquery or Javascript 3回答

我正在制作两个下拉菜单。将根据第一个菜单中的选择过滤第二个菜单。第一个将是20多个地区的清单;第二个菜单将有三个运输选项。

大多数地区只有一种交通选择，“汽车”。一个地区是个例外，有“自行车”，“汽车”和“步行”。 （我试图做一个if / else但是无法理解它;我不熟悉jQuery。）我希望大多数区域都在同一个数据类别中，简单的“全部”。问题是我无法弄清楚如何创建“所有”类别，因为只有两个类别，但有许多不同的值。

<form name="locator">

<select class="selectregion" id="regionselector" name="selectregion">
<option value="" selected="selected">Select Region</option>
<option data-category="all" value="al1">Alabama: Birmingham</option>
<option data-category="all" value="al2">Alabama: Montgomery</option>
<option data-category="all" value="al3">Alabama: Tuscaloosa</option>
<option data-category="all" value="ga1">Georgia: Atlanta</option>
<option data-category="all" value="ga2">Georgia: Augusta</option>
<option data-category="bikewalk" value="ga3">Georgia: Foo</option>
</select>

<select class="vehicle" id="vehicleselector" name="selectvehicle">
<option value="" selected="selected">Select Transportation</option>
<option data-value="all" value="car">Car</option>
<option data-value="bikewalk" value="bike">Bike</option>
<option data-value="bikewalk" value="walk">Walk</option>    
</select>
</form>

我的JavaScript（在this post中自定义代码：

$('#regionselector').change(function() { 
  var $options = $('#vehicleselector') 
    .val('') 
    .find('option') 
    .show();
  if (data-value != '0')
    $options 
    .not('[data-category="' + data-value + '"],[data-category=""]')
    .hide();
});

我用数据值替换了this.value，毫不奇怪它没有用。现在，没有任何过滤器。

我能做些什么来为每个地区展示“汽车”，为一个例外展示“汽车”，“自行车”和“走路”？ （在这个例子中，Foo，佐治亚州）。谢谢您的帮助。

JSFiddle

更新：The post suggested as a duplicate - 使用类而不是数据类 - 解决了问题。将该代码与我的代码相结合，只需使用“all”和“bikewalk”作为Foo（具有所有三种车辆选项的区域）的类别，并将“all”作为其余的单一类别。然后骑自行车/汽车/步行是Foo的选择，汽车是其他地区的选择。

Answer 1

你可以用相反的方法思考。隐藏所有选项，并在选择的操作中显示正确的选项。

$('#regionselector').change(function() {
    // always on change hide all options
    $('#vehicleselector option').not('[value=""]').hide();

    // get selected value from #regionselector
    let option = $(this).find('option[value="' + $(this).val() + '"]');

    // get value start with 2 chars
    let value = option.val().substring(0,2);

    // get all options start with value
    let optionsStartWithValue = $(this).find('option[value^="' + value + '"]');

    // for each options for region show vehicle
    optionsStartWithValue.each(function(i, v) {
      // show all options in #vehicleselector which contain selected data category
      $('#vehicleselector option[data-value="' + $(v).data('category') + '"]').show();
    });
});

// reset values
$('#vehicleselector').change(function() {
    if($(this).val() == '') {
    $('#regionselector').val('');
  }
});

JSFIDDLE