javascript - 显示 :block not working on option tag

Question

更新:我在 firefox 上测试我的代码，一切正常，但在 chrome 上:|

我有两个不同的选择下拉列表。一个用于省，另一个用于城市。我想让用户首先选择他们的省，然后我向他们展示城市选择列表，该列表仅包含所选省的城市。我的想法是以这种方式实现它:

HTML

<select id="Province">
    <option value = "1">Province1</option>
    <option value = "2">Province2</option>
</select>
<select id = "CityList">
    <option value = "1">city1</option>
    <option value = "1">city2</option>
    <option value = "2">city3</option>
</select>

值为1的城市在值为1的省内

jquery

$("#Province").change(function(){
   $("#CityList option").css({'display':'none'});
   var id = "#CityList option[value = " + $("#Province option:selected").val() + "]" ;
   $(id).css({'display':'block'});
})

但问题是没有一个选项会再次可见:|我通过更改它的字体颜色来检查我是否选择了正确的选项

我不知道为什么 display : block 对它们不起作用

Answer 1

如果您只想隐藏选项然后有选择地显示它们，隐藏和显示是更好的选择。

$("#Province").change(function(){
   $("#CityList option").hide();
   var id = "#CityList option[value = " + $("#Province option:selected").val() + "]" ;
   $(id).show();
})