Javascript jQuery在选择列表中隐藏选项

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

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

$（'Content_C003_Country'）。更改（函数（）{
常量过滤器=$（this.val（）；
//控制台日志（过滤器）；
$（“#内容_C003_状态选项”）。每个（函数（）{
（$（（$）选项[value^='“+filter+'”]）！=-1）？$（this.hide（）：$（this.show（））；
});
});

加拿大
美国
阿尔伯塔省
不列颠哥伦比亚省
马尼托巴省
亚利桑那州
阿肯色州
加利福尼亚

（函数（$）{
变量$country=$（“#Content_C003_country”）；
变量$state=$（“#Content_C003_state”）；
var$stateOptions=$state.children（）；
$country.on（'change'，function（）{
//删除选项
$stateOptions.detach（）；
//仅读取国家/地区的选项
$stateOptions.filter（函数（）{
返回此.value.indexOf（$country.val（）+“-”）==0；
}).附于（$州）；
//清除该值，使其不会默认为不应默认的值
$state.val（“”）；
});
}（jQuery））

加拿大
美国
阿尔伯塔省
不列颠哥伦比亚省
马尼托巴省
亚利桑那州
阿肯色州
加利福尼亚
可以通过以下方式实现：

$('#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'）。更改（函数（）{
$（“#内容_C003_状态选项”）.hide（）；
$（“#Content_C003_State option[value^='”+$（this.val（）+“]]）.show（）；
});

加拿大
美国
阿尔伯塔省
不列颠哥伦比亚省
马尼托巴省
亚利桑那州
阿肯色州
加利福尼亚
如果希望所有IE都能使用，您需要删除选项，而不是隐藏它们。并非所有IE版本都尊重选项的隐藏，并将选项保留在那里，而是作为一个空白。此行的计算结果将始终为false，因为您将jQuery对象与-1:
（$（$（$）选项[value^='+filter+']）进行比较！=-1）
您可能希望将该值与
.val（）进行比较。
您的选项元素的jQuery选择器将返回一个jQuery对象，因此如果您将其与-1进行比较，它将始终计算为true。@cpt crunchy请看我的答案，希望它能起作用。我喜欢这个解决方案。也许添加/删除不显示/不显示元素的css类会与IE11更兼容。这将如何解释这样的选项呢津巴布韦`如果加拿大是选定的国家，则不得居住。