Question

我使用Ajax加载select的内容：

<select id = "idResultEntryMeet" class="form-control input-md" size = 1>
</select>
...
$('#idResultEntryMeet').mousedown(function() { 
   $.post("/cgi-bin/listOptions", function(data) {
      $('#idResultEntryMeet').html(data);
   });
});

这在浏览器中并不一致，这让我觉得代码存在问题：

IE9从未在select
FF 27按预期工作
Chrome和IE11在第一个下拉菜单中没有显示任何内容鼠标单击，但将在第二个鼠标上显示预期的内容单击。我可以通过预加载select在两个浏览器上修复此问题在初始页面加载期间
Opera和Safari需要再次点击鼠标，即使是初始预加载

有关此问题的任何建议？

修改的抱歉，我觉得这并不明显：select必须是动态的。选项不断变化，具体取决于数据库的内容。我们的想法是，当用户点击select上的下拉菜单时，会看到当前选项。使用click（而非mousedown）处理程序并不起作用，因为用户无法实际选择他们在下拉列表中看到的任何内容。

CGI代码返回一个包含选项的HTML片段。 Firebug在完成POST后显示正确形成的select选项。

修改问题是Ajax请求必须是同步的（Sjax？）（在注释中或多或少建议），以防止干扰select下拉激活时发生的任何事情。此代码适用于适当的浏览器（并且几乎适用于IE9），但将async更改为true会导致各种浏览器出现一致的问题：

$('#idResultEntryMeet').mousedown(function() {
   $.ajax({
      type  : "POST",
      url   : "/cgi-bin/listOptions",
      async : false
   }).done(function(data, textStatus, jqXHR) {
      $('#idResultEntryMeet').html(data);
   });
});

Answer 1

尝试（仅在Chrome上测试）：

$('#idResultEntryMeet').on('mousedown', function(e){
    if(!e.view) return;
    e.preventDefault();    
    var _self = this;
    $.post("/cgi-bin/listOptions", function (data) {
        $(_self).html(data);
         var mdwn = document.createEvent("MouseEvents");
        mdwn.initMouseEvent("mousedown", false, false, null, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        _self.dispatchEvent(mdwn);
    });
});

Simplified DEMO

编辑：不适用于FF或IE ...

Answer 2

尝试更改以下代码：

<强> HTML

<select id="idResultEntryMeet" class="form-control input-md" size="1">      
</select>

<强> JS

$(document).ready(function() { 
   $.post("/cgi-bin/listOptions", function(data) {
     $('#idResultEntryMeet').html(data);
   });
});

$('#idResultEntryMeet').change(function() { 
   var valueSelected = $(this).val();
   alert(valueSelected);
   //Do something
});

修改你需要在jquery中包含委托绑定来做这个dinamic。

$('#idResultEntryMeet').bind("click", function() { var data = '<option value="volvo">Volvo</option><option value="saab">Saab</option>'; $('#idResultEntryMeet').html(data); });

并且需要像这样格式化方法的返回

将HTML代码段加载到select标记时的结果不一致

2 个答案: