在chrome中選擇點擊的更新選項

我在用戶點擊所選元素時試圖更新select元素的選項時發現了chrome問題。我正在處理的系統基本上按照下面的JSFiddle工作，只是通過ajax調用接收選項列表，但即使使用對象也會產生相同的結果。在chrome中選擇點擊的更新選項

看來正在發生的事情是，當用戶單擊並顯示選項時，它將只顯示1個選項。然後它將填充選項列表，但不更新顯示的數量。

如果您使用箭頭鍵向上或向下移動，您實際上可以選擇其他選項。我可以找到的唯一方法是單擊select元素，然後再次單擊它。

雖然它在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); 
    } 
}

來源

2014-02-14 Largoh

當選擇是開放的和選項的更新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元素。

來源

2014-02-14 08:09:01 CodingIntrigue

現在，在FF中存在問題...需要雙擊... :) – sinisake

太好了，非常感謝。我現在就試試看。您提到的問題實際上是在生產代碼中處理的。我只是拿出了需要複製的問題。 – Largoh

@nevermind確實如此，但問題是使用谷歌瀏覽器標記:)我將把它留給OP，他們如何決定讓代碼只能在需要它的瀏覽器上工作。 – CodingIntrigue

在chrome中選擇點擊的更新選項

回答

相關問題