javascript - 如何从 ajax 调用响应中附加 html 标签

Question

我有一个ajax函数:

$('#app-name').change(function () {//1
  console.log("inside change");
  var applname= this.value;
  console.log(applname);
  $.ajax({//2
    url: 'foo',
    method : 'GET',
    dataType : "json",
    contentType: "application/json",
    data: {"AppID":"appname"},
    success: function(data){
      var order_data = data;
      $('#foo-name').html('');
      $.each(order_data, function(i, item) {//3
        console.log(order_data[i]);
        $('<option value='+ order_data[i] +'>'+order_data[i]).html('</options>').appendTo('#foo-name');
      });//3 
    }
  });//2
});//1

除了将值附加到 html 之外，该函数正在执行其他所有操作。 我做错了吗？你能帮忙解决这个问题吗？

Answer 1

关闭</option您创建的 jQuery 对象中的标记。不要通过 html() 设置它方法。试试这个:

$('<option value="' + order_data[i] + '">' + order_data[i] + '</option>').appendTo('#foo-name');

也就是说，您还可以通过在循环中构建字符串并将其附加到 select 来提高代码的性能。一次，像这样:

success: function(data) {
    var options = '';
    $.each(data.split(/\n/), function(i, item) {
        options += '<option value=' + item.trim() + '>' + item.trim() + '</option>');
    });
    $('#foo-name').html(options);
}

更新您还需要split()您在循环之前声明要返回的文本。