没有从 ajax 生成的下拉列表中调用 html onchange 事件答案

【问题标题】：html onchange event not being called from ajax generated dropdown list没有从 ajax 生成的下拉列表中调用 html onchange 事件
【发布时间】：2017-07-19 04:34:07
【问题描述】：

我有一个 ajax 生成的下拉列表。当列表生成时，它会将其发送回 HTML，如下所示。但是，HTML 端的 onchange() 事件似乎没有启动。我怎样才能让它工作？

function listSess(){
 var name = document.getElementById("studentID").value;

 $.ajax({
    url : "<%=context%>/ListSessionsServlet?name=" + name,
    type : "POST",
    async : false,
    dataType: "json",
      success : function(data) {
          var toAppend = '';
          $.each(data,function(i,o){

              toAppend += '<option>'+o.sessid+'</option>';
             });

        $('#sessid')
            .find('option')
            .remove()
            .end()
            .append(toAppend);

      }  
});
} 


<select id="sessid" name="sessid" onchange="listStudents();">  <--onchange not working when getting ajax generated list
</select>

【问题讨论】：

标签： javascript java html ajax

【解决方案1】：

如果您使用 jQuery 而不是 inline 作为标记属性绑定更改事件，则可以在 AJAX 回调中使用 jQuery 触发它：

// Hook up the change event on DOM ready
$(function() {
    $('#sessid').change(function() {
        listStudents();
    });
});

function listSess(){
 var name = document.getElementById("studentID").value;

 $.ajax({
    url : "<%=context%>/ListSessionsServlet?name=" + name,
    type : "POST",
    async : false,
    dataType: "json",
      success : function(data) {
          var toAppend = '';
          $.each(data,function(i,o){
              toAppend += '<option>'+o.sessid+'</option>';
             });

        $('#sessid')
            .find('option')
            .remove()
            .end()
            .append(toAppend);

        $('#sessid').change(); // fire change
      }  
});
} 

<select id="sessid" name="sessid"></select>

如果没有value 属性，您当前构建新<options> 的逻辑可能无法正常工作。以下是我可以更改的方法：

...
success : function(data) {
    var $sessid = $('#sessid');
    $sessid.find('option').remove();
    $.each(data, function (index, item) {
        $sessid.append($('<option />').val(item.sessid).text(item.sessid));
    });
    $sessid.val(data[0].sessid).change();
}  
...

【讨论】：

所以我不必重写 listStudent()，对吗？您拥有的上述代码可以访问它吗？
下拉列表中选择的值显示出来，当我选择它时，它消失了。我应该将 .remove() 移到代码的另一部分吗？
我不确定我是否理解问题所在。您的 <option> 元素没有被赋予 value 属性。我正在编辑以显示构建新选项的替代方法。
是的，我正在使用这些更改。只是当我选择下拉列表时，我看到了值，但是当我单击它时，它消失了。该值似乎从列表中消失了。