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

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

我正在做的是重新填充组合框值（当单击组合框时，我真的必须仅 ）。它似乎有效，但谷歌Chrome中有一些奇怪的行为。在第一次点击我无法看到所有值，所以我必须再次点击才能加载完整的选项列表。这是一个例子：

第一次点击后：

当我再次点击它（现在有完整列表）

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

Answer 1

如果您使用focus事件绑定而不是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请求很可能会以单击处理程序失败的相同方式失败，因为它会在更新选项之前将控制权释放回浏览器。