javascript - 如何为多选下拉列表附加 AJAX

Question

这是我的工作代码： https ://jsfiddle.net/rkep92vo/

我的 AJAX：

  $.ajax({
    type: "POST",
    url: "/kpiDetailsList",
    datatype: "json",
    data: JSON.stringify({
      'employee_id': employee_id,
      }),
    contentType: 'application/json;charset=UTF-8',
    success: function (data) {
      console.log(data);
      var parsed_data = data;
      monthly_list = parsed_data.monthly_list;
      monthly_list_name = parsed_data.monthly_list_name;
      quarterly_list = parsed_data.quarterly_list;
      quarterly_list_name = parsed_data.quarterly_list_name;
      console.log(monthly_list.length)
      console.log(quarterly_list.length)

      if(monthly_list.length != 0 || quarterly_list.length != 0) {
      console.log('inside first if')
      $('#list1').css('pointer-events','');
      $("#span_month").attr("title", "");
      $('#list1_items').empty();
          for (index = 0; index < monthly_list.length; index++) {
            for (index = 0; index < monthly_list_name.length; index++) {
            $('#list1_items').append("<li><input type='checkbox' name='month' value='" + monthly_list[index] + "'id='" + monthly_list[index] + "'><label for='" + monthly_list[index] + "'>" + monthly_list_name[index] + "</label></li>");
            }
        }
      $('#list2').css('pointer-events','');
      $("#span_quarter").attr("title", "");
      $('#list2_items').empty();
          for (index = 0; index < quarterly_list.length; index++) {
            for (index = 0; index < quarterly_list.length; index++) {
            $("#list2_items").append("<option name='quarter' value='"+ quarterly_list[index] +"' id='" + quarterly_list[index] + "'>"+ quarterly_list_name[index] + "</option>");
            }
          }
        }

使用此 AJAX 它正在调用，但未显示该值。 控制台正如您在此处的控制台中看到的，在工作的 JS Fiddle 中，显示了.append(<option>)该值，但未显示该值。如果有人可以请帮助我，我是新手。

谢谢你。

标签： javascripthtmljquerycssajax

Answer 1

尝试将请求发布为同步调用。在它工作之后，你可以改变它的异步调用。

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType,
  async:false                  // ****** synchronous call
});