how to append a html tag from an ajax call response

Question

I have an ajax function :

$('#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

This function is doing everything else except appending value to the html. Am i doing it wrong? Can you help solve this issues.

Answer 1

Place the closing </option tag in the jQuery object you create. Don't set it through the html() method. Try this:

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

That said, you can also improve performance of your code by building the string in the loop and appending it to the select once, like this:

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

Update You also need to split() the text you state that you're returning before looping through it.

Answer 2

Please use below code in your ajax success event.

success: function(data) {
    var _html = '';
    $.each(order_data, function(i, item) {
        _html += '<option value='+ item +'>'+item+'</options>';
    });
    $('#foo-name').append(_html);
}