用擊倒點擊時填充選擇

我在嘗試加載select的數據時遇到了麻煩。頁面加載完成後，當我第一次點擊選擇時，它不會顯示任何數據。我關閉它，當我再次點擊選擇它顯示數據。用擊倒點擊時填充選擇

什麼建議嗎？ HTML

<div> 
<select data-bind="options: values, value: option, optionsCaption: 'Selecione...', event: { click: onClickSelect }" ></select> 
<label data-bind="text: option"></label>

var ViewModel = { 
    option : ko.observable(), 
    values : ko.observableArray() 
}; 

ViewModel.onClickSelect = (function() { 
    //Simulate server side 
    setTimeout(function() 
       { 
        ViewModel.values(["one", "two", "three"]); 
       }, 2000); 

}); 

ko.applyBindings(ViewModel);

什麼建議嗎？

來源

2015-05-14 Gus

是你的問題「如何填寫選擇與淘汰賽的單擊事件？」或「在這個示例中，我需要雙擊select來填充它。」 –

嗨，我的問題是「如何在點擊事件中用Knockout填充選擇？」通過簡單的點擊選擇應該擴大與值 – Gus

問題不是你需要雙擊，但事實上，選擇選項之前顯示添加新的values.If再次測試你的例子，你會看到如果你點擊然後等待兩秒鐘（等待時間你把setTimeout），那麼當你再次單擊時，你會看到值。我不知道如何實現你想要的。我發現了一個問題在哪裏有人正在尋找相同的行爲：http://stackoverflow.com/questions/20576346/how-to-update-select-options-before-showing-them-in-jquery什麼是用例，你需要加載點擊選擇選項？ –

這很自然。

當您第一次加載頁面時，values數組爲空，所以在下拉列表中沒有任何內容顯示。然後，當你就降下來點擊，你觸發選擇，這將調用此代碼：

setTimeout(function() 
      { 
       ViewModel.values(["one", "two", "three"]); 
      }, 2000);

這段代碼的作用是，在等待兩秒後，它加載在下拉列表中的3個值。所以，如果你關閉下拉列表，並且至少2秒鐘後再次點擊它，那麼選項就在那裏。如果你足夠快地做到這一點，你會發現在2秒鐘之前再次點擊下拉菜單時，select已經是空的。

因此，代碼正常工作，如預期。對於你的問題，不可能知道你在做什麼。

來源

2015-05-18 11:50:04 JotaBe

有一種方法可以做到這一點。

試試這個代碼

ViewModel.onClickSelect = function (v, e) { 
    var sel = e.target; 
    if (sel.childNodes.length === 1) {  
     sel.childNodes[0].innerText = 'Loading...' 
     setTimeout(function() { 
      sel.childNodes[0].innerText = 'Selecione...' 
      ViewModel.values(["one", "two", "three"]); 
      sel.blur(); 
      v.openSelect(sel); 
     }, 2000); 
    } 
}; 

//to open 'select' programmatically 
ViewModel.openSelect = function (element) { 
    if (document.createEvent) { 
     var e = document.createEvent("MouseEvents"); 
     e.initMouseEvent('mousedown', true, true, window); 
     element.dispatchEvent(e); 
    } 
    else if (element.fireEvent) element.fireEvent("onmousedown"); 
}; 

ko.applyBindings(ViewModel);

演示JSFiddle

來源

2015-05-18 14:07:17 Jag

此演示在IE 11中不起作用。任何想法？ – Gus

此示例僅適用於Chrome。 – Gus

hmm ...看起來像'dispatchEvent'和'fireEvent'都在IE中不工作。我沒有使用Jquery，所以如果你真的希望它在IE中工作，請嘗試使用'Jquery'來觸發'event' – Jag

用擊倒點擊時填充選擇

回答

相關問題