谷歌浏览器不更新HTML选择列表中的最后选项

Google Chrome not updating for last options in HTML select list

本文关键字：最后 选项 列表 选择 更新 HTML 谷歌浏览器      更新时间：2023-09-26

我有一个问题，试图创建一个完全离线运行的HTML文件(除了在jQuery中加载脚本)。

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

在谷歌浏览器(唯一的浏览器我关心的时刻)在我的列表中的最后两个州(俄克拉何马州和田纳西州)正确触发事件，随后他们的内联样式被更改为块从没有jQuery。但是，在Chrome中，我无法点击县列表并看到显示的县。如果我更改列表中县的排序顺序，则总是最后两个州不显示其对应的县。如果我注释掉任意两个州的县，那么所有没有注释的州的县都会显示出来。

所有代码都在JSFiddle中(不包括表体):https://jsfiddle.net/kb7mnyr1/

显示县的代码(JSFiddle链接需要):

function changeCounty(state){
        $countylist = $('#countySelect').find('option');
        $countylist.hide();
        $.each($countylist, function(i, val){
        if($(val).attr('class') == state) $(val).show();
    });
}

尝试只在需要时使用相关元素填充select:

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

其中counties是对象映射counties[state] = [$county1option, $county2option, ...]

这里似乎行得通

请注意，现在生成对象的方式非常糟糕(简单地获取select中的值，填充对象，然后从select中删除它们)。

你应该直接在JS中生成这个，而不是跳过那些步骤，这样做是留给读者的练习(制作一个JS对象{state: [counties], state2: [counties], ...}，并根据需要用jQuery动态生成选项，而不是在你的HTML中预填充)。

相关文章：