javascript - jQuery ajax请求和html只显示一次数据

Question

美好的一天!

我有一个问题，当我单击ajax请求按钮时，它工作正常并在我选择的项目上显示数据，但是，当我再次单击ajax请求按钮时，这给出了数据(这是正确)但在我选择的项目上再次显示数据，因此，我有两次相同的数据，我该如何解决这个问题？我是 JS 新手，这是我的学校项目哈哈，所以如果你能帮助我，非常感谢! <3

这是我的js代码

  $("#hola").click( function(e) {
  e.preventDefault();
  $.ajax({
    method: 'GET',
    url: '/api/check-estudio/',
    data: {},
    dataType: 'json',
    cache: true,
    success: function(data) {
      for (var i=0; i<data.length; i++) {
        console.log(data[i]);
        var optionHTML = '<option>' + data[i].name + '</option>';
        $(".selectEstudio").append(optionHTML);
      }
    },
    error: function(xhr, resp, text) {
      console.log(xhr, resp, text);
    }
  });

当我第一次单击时，工作完美，并在选择框中显示我的数据并显示选项。

当我关闭模态并再次单击显示模态和ajax请求的按钮时，显示两次相同的信息。

感谢您的宝贵时间! <3

Answer 1

使用 .html() 代替 .append() 并进行一些代码增强:-

var optionHTML =''; // define variable
for (var i=0; i<data.length; i++) {
    optionHTML += '<option>' + data[i].name + '</option>'; // add all options
}
$(".selectEstudio").html(optionHTML); // append in last not inside loop one-by-one

或者你可以先empty()选择框，然后再次添加:-

var optionHTML ='';
 $(".selectEstudio").empty();
for (var i=0; i<data.length; i++) {
    optionHTML += '<option>' + data[i].name + '</option>';
}
$(".selectEstudio").html(optionHTML);