javascript - 在 chrome 中选择单击时更新选项

Question

当用户点击选择元素时尝试更新选择元素的选项时，我发现了 chrome 的一个问题。 我正在处理的系统基本上按照下面的 JSFiddle 工作，除了选项列表是通过 ajax 调用接收的，但即使使用对象也会产生相同的结果。

似乎发生的情况是，当用户单击并显示选项时，它只会显示 1 个选项。然后它将填充选项列表，但不会更新显示的数量。

如果您使用箭头键向上或向下移动，您实际上可以选择其他选项。我能找到的唯一绕过它的方法是单击关闭选择元素，然后再次单击它。

虽然它在 IE 和 Firefox 中完美运行。

可以在这里找到 JSFiddle:http://jsfiddle.net/Largoh/Thz55/

HTML

<select id="selector">
    <option value="2" selected>Option 2</option>
</select>

Javascript

$(function() {
    $("#selector").click(function() {
        if($("option", this).length < 2)
            GetOptions(this);
    }); 
});

function GetOptions(select) {
    var Options = [
        { id: 1, text: "Option 1"},
        { id: 2, text: "Option 2"},
        { id: 3, text: "Option 3"},
        { id: 4, text: "Option 4"},
        { id: 5, text: "Option 5"},
        { id: 6, text: "Option 6"},
        { id: 7, text: "Option 7"}
        ];
    $('option:first', select).remove();
    for(var i = 0; i < Options.length;i++)
    {
        var option = $("<option/>");
        option.val(Options[i].id).text(Options[i].text);
        $(select).append(option);
    }
}

Answer 1

Chrome在打开选择并更新选项时不会更新UI，因此您可以通过模糊元素并再次将其重点放置来解决它:

// Update the options first
$('option:first', select).remove();
for(var i = 0; i < Options.length;i++)
{
    var option = $("<option/>");
    option.val(Options[i].id).text(Options[i].text);
    $(select).append(option);
}
// Take focus away from the select
$(select).blur();
// Force the dropdown to open:
// http://stackoverflow.com/questions/10453393/how-to-open-the-select-input-using-jquery
var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
select.dispatchEvent(e);

http://jsfiddle.net/as68Y/

但请记住这种方法 - 特别是如果数据源是 AJAX - 如果我去点击“选项 1”，它突然变成“选项 X”会怎样。不是很好的用户体验。您最好在此操作期间禁用 select 元素。