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'});
})

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

我不知道为什么显示：阻止不对它们起作用

Answer 1

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

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

display：阻止不在选项标签上工作

1 个答案: