ajax面临的问题

Question

我是 laravel 和 ajax 的新手...我想在下拉列表中显示所选国家的状态，但是当我从下拉列表中选择国家时，它会完美地从 laravel 中获取数据并在 ajax 中获取。 . 但它无法在 html 选项标签中附加数据.. 有关更多详细信息，我还附上了 ajax 的代码...`

$("#country").change(function(e){
  var countryid = $(this).val();
  console.log("Change Event Happpened on id : "+ countryid);
  $.ajax({
    type :"GET",
    url :"GetStates/"+countryid,
    success : function(statelist){
      $("#state").empty();
      $("#state").append('<option> Select State...</option>')
      $.each(statelist,function (statename,stateid) {
        **$("#state").append('<option>' + statename + ' </option>') // This line of code is not working**
        console.log("in each function");
      });
    }
  });
})

`

Answer 1

您错误地使用了jQuery.each 函数。 jQuery.each callback function 接受两个参数：

Function( Integer indexInArray, Object value )

所以根据你的（错误的）代码：

$.each(statelist,function (statename,stateid)

statename 持有项目索引，stateid 接收 statelist 项目，这显然与您的想法背道而驰。

假设statelist具有以下结构：

statelist = [
  {
    statename: 'LA',
    stateid: 1
  }
]

回调函数应该如下所示：

$.each(statelist,function (index, state) {
  $("#state").append(`<option value="${state.stateid}">${state.statename}</option>`)
});

您可以使用javascript object destructuring 来简化此操作：

$.each(statelist,function (index, {stateid, statename}) {
  $("#state").append(`<option value="${stateid}">${statename}</option>`)
});

工作代码：

const statelist = [{
    statename: "LA",
    stateid: 1
  },
  {
    statename: "MA",
    stateid: 2
  },
];

$("#state").empty();
$("#state").append("<option value=''>Please select a state...</option>");
$.each(statelist, (index, {
  statename,
  stateid
}) => {
  $("#state").append(`<option value="${stateid}">${statename}</option>`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="state">
  <option>This will be removed</option>
</select>