jQuery隐藏选择列表中的选项答案

【问题标题】：jQuery Hide options in a select listjQuery隐藏选择列表中的选项
【发布时间】：2018-01-17 02:16:39
【问题描述】：

我的“状态”下拉菜单中的选项都被隐藏了

我正在尝试根据所选国家/地区下拉列表的值进行过滤。

$('#Content_C003_Country').change(function() {
  const filter = $(this).val();
  //console.log(filter);
  $("#Content_C003_State option").each(function() {
    ($("option[value^='" + filter + "']") != -1) ? $(this).hide(): $(this).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select id="Content_C003_Country" class="searchFieldDrop">
  <option value="36">Canada</option>
  <option value="222">United States</option>
</select>

<select id="Content_C003_State" class="searchFieldDrop">
  <option value="36-AB">Alberta</option>
  <option value="36-BC">British Columbia</option>
  <option value="36-MB">Manitoba</option>
  <option value="222-AZ">Arizona</option>
  <option value="222-AR">Arkansas</option>
  <option value="222-CA">California</option>
</select>

【问题讨论】：

如果您希望它与所有 IE 一起使用，您将要删除选项，而不是隐藏它们。并非所有 IE 版本都尊重选项的隐藏，并将选项保留在那里，而是作为一个空格。
stackoverflow.com/questions/9234830/…
这一行总是会评估为 false，因为您将 jQuery 对象与 -1 进行比较：( $("option[value^='" + filter + "']") != -1 ) 您可能希望将该值与 .val() 进行比较
您的选项元素的 jQuery 选择器将返回一个 jQuery 对象，因此如果您将其与 -1 进行比较，它将始终评估为 true。
@cpt-crunchy 看到我的回答希望它能起作用。

标签： javascript jquery html

【解决方案1】：

(function($){
  var $country = $('#Content_C003_Country');
  var $state = $('#Content_C003_State');
  var $stateOptions = $state.children();
  
  $country.on('change', function(){
    //remove the options
    $stateOptions.detach();
    //readd only the options for the country
    $stateOptions.filter(function(){
      return this.value.indexOf($country.val() + "-") === 0;
    }).appendTo($state);
    //clear out the value so it doesn't default to one it should not
    $state.val('');
  });
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Content_C003_Country" class="searchFieldDrop">
  <option value="36">Canada</option>
  <option value="222">United States</option>
</select>

<select id="Content_C003_State" class="searchFieldDrop">
  <option value="36-AB">Alberta</option>
  <option value="36-BC">British Columbia</option>
  <option value="36-MB">Manitoba</option>
  <option value="222-AZ">Arizona</option>
  <option value="222-AR">Arkansas</option>
  <option value="222-CA">California</option>
</select>

【讨论】：

【解决方案2】：

这可以简单地实现：

$('#Content_C003_Country').change(function() {
  //Hide all options
  $("#Content_C003_State option").hide();

  //Show the filtred ones
  $("#Content_C003_State option[value^='" + $(this).val() + "']").show();
});

或者也使用一行：

$("#Content_C003_State option").hide().end().find('[value^='+$(this).val()+']').show();

代码：

$('#Content_C003_Country').change(function() {
  $("#Content_C003_State option").hide();
  $("#Content_C003_State option[value^='" + $(this).val() + "']").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<select id="Content_C003_Country" class="searchFieldDrop">
  <option value="36">Canada</option>
  <option value="222">United States</option>
</select>

<select id="Content_C003_State" class="searchFieldDrop">
  <option value="36-AB">Alberta</option>
  <option value="36-BC">British Columbia</option>
  <option value="36-MB">Manitoba</option>
  <option value="222-AZ">Arizona</option>
  <option value="222-AR">Arkansas</option>
  <option value="222-CA">California</option>
</select>

【讨论】：

我喜欢这个解决方案。也许添加/删除一个不显示/不显示元素的 css 类将与 IE11 更兼容。
这将如何解释诸如。 ` ` 如果加拿大是所选国家/地区，则不填充。