Question

我一直在努力使用php，jquery，ajax从mysql填充数据，但是在下拉列表更改后，检索到的数据没有被删除或重新加载。是否有任何内容可以添加到此代码中？

 function fetch_select(val) {
    console.log(val);
     $.ajax({
       type: 'post',
       url: 'action.php?id=select-project',
       data: {
         get_option:val
       },
       dataType: 'json',  
       success: function(data)    {    

      // success: function (response) {
        //var data = jQuery.parseJSON(response);
          $.each(data, function(index, row){
              var fullname = row.fullname;      
              var number = row.number;           
          $('#display').append("<tr style=\"background-color:#ccc\"><td>id: </td><td> name: </td></tr><tr><td>"+number+"</td><td>"+fullname+"</td></tr>"); 
}); 
       }
     });
}

Answer 1

但在下拉列表更改后，检索到的数据未被删除或重新加载。

您正在追加新回复。您必须删除现有的html并添加新的。你可以使用$('#display').html()来做到这一点。用这个替换你的代码块，它必须正常工作。

 $('#display').html(); // clean up the container
$.each(data, function(index, row){
              var fullname = row.fullname;      
              var number = row.number;           
          $('#display').append("<tr style=\"background-color:#ccc\"><td>id: </td><td> name: </td></tr><tr><td>"+number+"</td><td>"+fullname+"</td></tr>"); 
});

Answer 2

在这里我是如何通过更改$（＆＃39; #display＆＃39;）来实现它的。附加到变量并将它们放入.innerHTML中。每次下拉列表更改时，它都会更改值并正确循环每个值。

function fetch_select(val) {
    $.ajax({
       type: 'post',
       url: 'action.php?id=select-project',
       data: {
         get_option:val
       },
       dataType: 'json',  
       success: function(data)    {    

      // success: function (response) {
        //var data = jQuery.parseJSON(response);

        var str = "<table id=\"cellcardtable\" class=\"table table-bordered table-condensed\"><tr><th width=\"15%\">#</th><th width=\"30%\">Full name</th><th width=\"30%\">Member since</th><th width=\"30%\">Status</th></tr>";
          $.each(data, function(index, row){

              var fullname = row.fullname;      
              var number = row.number;   
              var member = row.member;
              var status = row.status;        
              str = str + "<tr><td>"+number+"</td><td>"+fullname+"</td><td>"+member+"</td><td>"+status+"</td></tr>";

              document.getElementById("display").innerHTML=str;
          });
           str = str + "</table>" ; 
       }
    });
  }

下拉列表更改后，删除填充的值

2 个答案: