Javascript Google Chrome未更新HTML选择列表中的最后选项

我在尝试创建一个完全脱机运行的HTML文件时遇到了一个问题（除了在jQuery中加载脚本）

该页面允许用户首先从状态选择菜单中选择状态。这会触发一个事件，在该事件中，第二个选择菜单的所有县都循环通过，属于所选州的县显示，其他县隐藏

在Google Chrome（我目前唯一关心的浏览器）中，我列表中的最后两个州（俄克拉何马州和田纳西州）正确地触发了事件，随后jQuery将它们的内联样式从none更改为block。但是，在Chrome中，我无法单击县列表并查看显示的县。如果更改列表中县的顺序，则最后两个州始终不显示其对应的县。如果我注释掉任何两个州的县，则会显示所有未注释的州县

所有代码都在JSFIDLE中（更少的表体）：

显示县的代码（JSFIDLE链接需要此代码）：

---

当您需要相关元素时，请尝试仅使用它们填充

选择
：

$countylist.empty().append(counties[state]);

其中，
countries
是一个对象映射，
countries[state]=[$county1option，$county2option，…]

它似乎起作用了

请注意，现在生成对象的方式非常糟糕（只需获取select中的值，填充对象，然后将其从select中删除）

您应该直接在JS中生成，而不必跳过这些步骤，这样做是留给读者的练习（制作一个JS对象
{state:[countries]，state2:[countries]，…}
，并根据需要使用jQuery动态生成选项，而不是在HTML中预填充）.
我建议的第一件事是停止使用全局变量。可能是元素太多的问题。。。如果您注释掉了许多
选项
s，则它们似乎是有效的。没有更多的全局变量。仍然好奇为什么它以前不起作用，但这是一个更好的方法（一旦直接加载县），我没有考虑过。谢谢你的洞察力！
$countylist.empty().append(counties[state]);