Chrome：使用 jQuery 动态更改选择菜单内容的问题答案

【问题标题】：Chrome: Issue with changing select menu content dynamically using jQueryChrome：使用 jQuery 动态更改选择菜单内容的问题
【发布时间】：2011-05-08 15:56:27
【问题描述】：

当用户单击选择菜单时，我会在 Javascript 中动态构建值，然后在选择元素上调用 jquery .html 函数。我可以在 Firefox 中看到动态选项，但在 Chrome 和 Safari 中，选择菜单什么也没有显示。仅当我关闭菜单并再次打开它时才会显示这些选项。有人有什么想法或建议吗？

var selectionDiv = $('#someSelectElement');
var newHtml = "";
for(var i = 0; i < 3; i++)
{
   newHtml += "<option>" + i + "</option>";
}
selectionDiv.html(newHtml);

【问题讨论】：

你能在JS Fiddle重现这种行为吗？
“打开”是什么意思？
所以这是在click 事件上触发的？如果是这样，您为什么要等到他们点击构建options？我可以看到不同浏览器的结果会有什么不同。
对不起 - 我的意思是“点击”一个选择菜单。
我需要在他们单击选择菜单时构建选项，因为我的页面上有很多选择菜单（每个菜单都做不同的事情），而我只想做一些事情（可能很昂贵）仅当用户对此感兴趣时。

标签： jquery select dynamic google-chrome option

【解决方案1】：

我认为菜单是在点击处理程序完成之前还是之后显示取决于浏览器的实现。因此，您可以在浏览器之间获得（并且显然正在获得）不同的结果。

我猜有些浏览器更喜欢立即显示菜单，这样不会有延迟，但代价是对 options 的任何修改都没有机会发生。

最好的解决方案可能是根本不尝试修改 click 事件的内容。如果您需要此功能，或许您可以改用mouseover。

如果你使用mouseover，那么你可以使用jQuery's .one() method，所以它只运行一次。

$('#someSelectElement').one('mouseover', function() {

    var newHtml = "";
    for(var i = 0; i < 3; i++)
    {
       newHtml += "<option>" + i + "</option>";
    }
    $(this).html(newHtml);

});

【讨论】：

很好 - 我没想过在鼠标悬停时这样做。在鼠标悬停事件上，在 Chrome 中构建选项菜单效果很好。
鼠标悬停时执行的函数是否保证在用户点击之前完成执行？如果它是一个昂贵的功能，需要一秒钟才能返回，但用户在鼠标悬停后立即单击。那么弹出的菜单会不会没有加载选项呢？

【解决方案2】：

确保将您的代码包装在就绪事件中

$(function(){
  var selectionDiv = $('#someSelectElement');
  var newHtml = "";
  for(var i = 0; i < 3; i++)
  {
     newHtml += "<option>" + i + "</option>";
  }
  selectionDiv.html(newHtml);
});

你也可以试试这个：

$(function(){
  var selectionDiv = $('#someSelectElement');
  for(var i = 0; i < 3; i++)
  {
     selectionDiv.html(selectionDiv.html() + "<option>" + i + "</option>");
  }
});

【讨论】：

感谢您的建议 - 不幸的是，这两种方法都不起作用。