Question

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

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

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

});

Answer 2

确保将代码包装在ready事件中

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

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

2 个答案: