Javascript 用敲除填充单击选择

我在尝试加载select的数据时遇到问题。 加载页面后，当我第一次单击“选择”按钮时，不会显示任何数据。 我关闭它，当我再次单击“选择”按钮时，它会显示数据

有什么建议吗？ HTML

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

有什么建议吗？

这很自然

第一次加载页面时，

values

数组为空，因此下拉列表中没有显示任何内容。然后，当您单击下拉列表时，您将触发select，这将调用以下代码：

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

此代码所做的是，在等待两秒钟后，加载下拉列表中的3个值。因此，如果您关闭下拉列表，并在至少2秒钟后再次单击它，选项就在那里。如果你做得足够快，你会意识到在2秒钟过去之前再次点击下拉列表，选择已经是空的

---

因此，正如预期的那样，代码工作得非常完美。对于你的问题，不可能知道你想做什么。

有一种方法可以做到这一点

试试这个代码

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);

---

演示

您的问题是“如何在单击事件中使用敲除填充选择？”还是“在此示例中，我需要双击选择以填充它”。您好，我的问题是“如何在单击事件中使用敲除填充选择？”只需点击选择按钮，选择按钮就会随着值展开。问题不在于您需要双击，而是在添加新值之前会显示选择选项。如果您再次测试您的示例，您会发现如果您单击然后等待两秒钟（您在setTimeout中输入的等待时间），然后，当您再次单击时，您将看到值。我不确定如何实现您想要的。我发现有人在搜索相同的行为时遇到了一个问题：您需要在单击时加载选择选项的用例是什么？因此，您只想在有人单击选择时加载选择的值？不是在那之前吗？这可能与你的问题相符。。隐马尔可夫模型。。。看起来

dispatchEvent

和

fireEvent

在IE中都不起作用。我没有使用Jquery，所以如果您确实希望它在IE中起作用，请尝试使用

Jquery

触发

事件
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);