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

当用户单击select菜单时，我在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);

var-selectionDiv=$（'someSelectElement'）；
var newHtml=“”；
对于（变量i=0；i<3；i++）
{
新HTML+=“”+i+“”；
}
selectionDiv.html（newHtml）；

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

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

$（函数（）{
var selectionDiv=$（“#someSelectElement”）；
var newHtml=“”；
对于（变量i=0；i<3；i++）
{
新HTML+=“”+i+“”；
}
selectionDiv.html（newHtml）；
});

你也可以试试这个：

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

$（函数（）{
var selectionDiv=$（“#someSelectElement”）；
对于（变量i=0；i<3；i++）
{
selectionDiv.html（selectionDiv.html（）+“”+i+“”）；
}
});

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

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

$（函数（）{
var selectionDiv=$（“#someSelectElement”）；
var newHtml=“”；
对于（变量i=0；i<3；i++）
{
新HTML+=“”+i+“”；
}
selectionDiv.html（newHtml）；
});

你也可以试试这个：

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

$（函数（）{
var selectionDiv=$（“#someSelectElement”）；
对于（变量i=0；i<3；i++）
{
selectionDiv.html（selectionDiv.html（）+“”+i+“”）；
}
});

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

我想有些浏览器更喜欢立即显示菜单，这样就不会出现延迟，而代价是对

选项的任何修改都没有机会进行

最好的解决方案可能是不要试图修改
单击事件上的内容。如果您需要此功能，或许可以使用
mouseover

如果使用
mouseover
，则可以使用，因此它只运行一次

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

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

});

$（'someSelectElement'）.one（'mouseover'，function（）{
var newHtml=“”；
对于（变量i=0；i<3；i++）
{
新HTML+=“”+i+“”；
}
$（this.html（newHtml）；
});
我想菜单是在单击处理程序完成之前还是之后显示，取决于浏览器实现。因此，您可以在浏览器之间获得（而且显然正在获得）不同的结果

我想有些浏览器更喜欢立即显示菜单，这样就不会出现延迟，而代价是对
选项的任何修改都没有机会进行

最好的解决方案可能是不要试图修改
单击事件上的内容。如果您需要此功能，或许可以使用
mouseover

如果使用
mouseover
，则可以使用，因此它只运行一次

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

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

});

$（'someSelectElement'）.one（'mouseover'，function（）{
var newHtml=“”；
对于（变量i=0；i<3；i++）
{
新HTML+=“”+i+“”；
}
$（this.html（newHtml）；
});
你能在上重现这种行为吗？你说的“打开”是什么意思？那么这是在
单击事件时触发的？如果是这样，为什么要等到他们单击才能生成
选项
？我可以看到不同浏览器的结果会有什么不同。对不起，我的意思是“单击”一个选择菜单。我需要在他们单击选择菜单时构建选项，因为我的页面上有很多选择菜单（每个菜单都有不同的功能），而我只想做一些事情（可能很昂贵）仅当用户对该行为感兴趣时。您可以在上重现此行为吗？您对“打开”的意思是什么？因此，这是在
单击
事件时触发的？如果是这样，为什么要等到他们单击才能生成
选项
？我可以看到不同浏览器的结果会有什么不同。对不起，我的意思是“单击”一个选择菜单。我需要在他们单击选择菜单时构建选项，因为我的页面上有很多选择菜单（每个菜单都有不同的功能），而我只想做一些事情（可能很昂贵）仅当用户对该方法感兴趣时。感谢您的建议-不幸的是这两种方法都不起作用。感谢您的建议-不幸的是这两种方法都不起作用。很好-我没有想过在鼠标上做这件事。在Chrome中构建选项菜单在mouseover事件中运行良好。在mouseover上执行的函数是否保证在用户单击之前完成执行？如果这是一个昂贵的函数，需要一秒钟的时间才能返回，但用户在鼠标悬停后立即单击会怎么样。那么弹出的菜单会不会有未加载的选项？很好-我没想过在鼠标上这样做。在Chrome中构建选项菜单在mouseover事件中运行良好。在mouseover上执行的函数是否保证在用户单击之前完成执行？如果这是一个昂贵的函数，需要一秒钟的时间才能返回，但用户在鼠标悬停后立即单击会怎么样。那么弹出的菜单中是否有未加载的选项？