Chrome: проблема с динамическим изменением содержимого меню выбора с помощью jQuery

Question

Когда пользователь щелкает меню выбора, я динамически формирую значения в Javascript, а затем вызываю функцию jquery .html для элемента select.Я вижу динамические параметры в 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 .one() метод , поэтому он запускается только один раз.1014 *

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

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

});

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