用击倒点击时填充选择

我在尝试加载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

用击倒点击时填充选择

回答

相关问题