Question

当用户点击所述选择元素时，我在尝试更新select元素的选项时发现了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不会更新用户界面，因此您可以通过模糊元素来解决这个问题。重点关注：

// 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元素。

选择Chrome中的选择单击选项

1 个答案: