javascript - 谷歌浏览器中奇怪的下拉行为

Question

我有这个组合框 HTML:

<select class="selects" name="projectTown" id="projectTown" 
  data-bind="options:availableTowns, value: projectTown, click: loadComboValues">
</select> 

如您所见，单击保管箱时，我正在执行 loadComboValues 函数。

这里是:

loadComboValues = function(){
          if(isForUpdate() == "yes"){
              availableTowns([]);
              availableTowns.push("1");
              availableTowns.push("2");
              availableTowns.push("3");
              availableTowns.push("4");
              availableTowns.push("5");
              availableTowns.push("6");
           }
};

我正在做的是重新填充组合框值(我确实必须在单击组合框时仅执行此操作)。它似乎在工作，但在谷歌浏览器中有奇怪的行为。第一次点击我看不到所有的值，所以我必须再次点击才能加载完整的选项列表。这是一个例子:

第一次点击后:

当我再次点击它时(现在有完整列表)

我在这里错过了什么？我知道它应该是非常小而简单的东西，但我无法发现它。

Answer 1

如果您使用 focus 事件绑定(bind)而不是 click(在 Windows 上的 Chrome 中测试)，它似乎可以按预期工作:

<select class="selects" name="projectTown" id="projectTown" 
  data-bind="event: { focus: loadComboValues }, options:availableTowns, value: projectTown">
</select>

JSFiddle:http://jsfiddle.net/7hVAv/5/

编辑(感谢 Robert Slaney 的评论):

这仅在您可以同步更新选项时有效(例如:从您的应用程序的另一部分已经加载到浏览器中)。从此处发起的 ajax 请求很可能会以与点击处理程序失败相同的方式失败，因为它会在选项更新之前将控制权交还给浏览器。