在selectbox

Question

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

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

＆＃13;

＆＃13;

$(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');

});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

另请注意，使用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>