如何为多选下拉菜单附加 AJAX答案

【问题标题】：How to apend AJAX for multi- select dropdown如何为多选下拉菜单附加 AJAX
【发布时间】：2021-10-02 14:49:05
【问题描述】：

这是我的工作代码： 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，它正在调用，但未显示该值。 Console正如您在此处的控制台中看到的，在工作的 JS Fiddle 中，显示了该值，但在 .append(<option>)未显示该值。如果有人可以帮助我，我是新手。

谢谢。

【问题讨论】：

您已完成第一步并使用代码 sn-p 来演示您的问题。现在进行第二步，让代码 sn-p 实际工作。目前它会抛出一个错误。
另外，最好将代码减少到相关位。里面有很多与你的问题无关的绒毛。
我进行了更改，谢谢，但由于问题，代码无法正常工作
当我尝试运行代码 sn-p 时，它仍然会抛出错误。我也是认真的：减少你的代码量。删除所有直接与您的问题无关的内容。这很可能意味着您需要从头开始重新编写示例代码。
完成，我添加了工作示例并减少了代码，现在请看一下，如果有办法让我知道

标签： javascript html jquery css ajax

【解决方案1】：

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

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

【讨论】：