javascript - 在选择框中选择下一个元素时遇到问题

Question

选择其他国家/地区时，列表会变为可见。它有效，但是有一个问题。选择另一个县时，必须显示其附属区域的第一项，而不是剩余值。

即当选择 Germany 时，New York 必须变得不可见，而 Dresden 必须变得可见。我一直在尝试这样做几个小时，但没有运气。有什么建议吗？

$(function() {
  $("[name='country']").change(function() {
    // Target option
    var hiddenClass = 'hidden';
    var selected = $(this).find(':selected').data('country-id');

    // Hide all options
    $("[name='region']").find('option') // Find all options
      .addClass(hiddenClass) // Hide them all
      .each(function() {
        // Find current active
        if ($(this).data('country-id') == selected) {
          // Show currently matched against selection
          $(this).removeClass(hiddenClass);
        }
      });
  }).trigger('change');

});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
</script>

<select name="country">
  <option data-country-id="1">USA</option>
  <option data-country-id="2">Germany</option>
</select>

<select name="region">
  <option data-country-id="1">New York</option>
  <option data-country-id="1">California</option>
  <option data-country-id="1">Carolina</option>
  <option data-country-id="2">Dresden</option>
  <option data-country-id="2">Berlin</option>
</select>

Answer 1

这个问题是因为，尽管某些 option 元素被隐藏了，但从技术上讲，它们在 DOM 中仍然可用以供选择。要解决此问题，您可以根据给定的 country-id 值强制选择更新为第一个可用的 option。

另请注意，通过使用 filter() 而不是 each() 循环，您可以使您的逻辑更加简洁。试试这个:

$(function() {
  $("[name='country']").change(function() {
    var hiddenClass = 'hidden';
    var selected = $(this).find(':selected').data('country-id');
    
    $('[name="region"] option').addClass(hiddenClass)
      .filter(`[data-country-id="${selected}"]`).removeClass(hiddenClass)
      .first().prop('selected', true);
  }).trigger('change');
});

.hidden { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<select name="country">
  <option data-country-id="1">USA</option>
  <option data-country-id="2" selected="true">Germany</option>
</select>

<select name="region">
  <option data-country-id="1">New York</option>
  <option data-country-id="1">California</option>
  <option data-country-id="1">Carolina</option>
  <option data-country-id="2">Dresden</option>
  <option data-country-id="2">Berlin</option>
</select>