AJAX选择并自动加载数据

Question

我的表格：

<form>
  <select id="f_name"><?php echo $fname ?></select>
  <select id="l_name></select>
</form>

我的脚本：

$(document).ready(function(e){
  $("#f_name").change(function(){
    var fname = $('this').val();
    $.ajax({
      type :'POST',
      data :{name:fname},
      url   :"fullname.php",
      success : function(data){
        $('#l_name').html(data);
      }     
    });
  });
});

我的fullname.php：

$db = mysqli_connect("localhost", "root", "", "test");
if(isset($_POST['name'])){
  $f_name = $_POST['name'];
  $sql = mysqli_query($db, "SELECT last_name FROM fullname WHERE first_name = '$f_name'");
  $res = mysqli_fetch_array($sql);
  echo $res;
}

当我选择名字时，姓氏不会出现。

Answer 1

您表格的形成不正确：

<form>
  <select id="f_name"><?php echo $fname ?></select>
  <select id="l_name></select>
</form>

应该是：

<form>
  <select id="f_name">
    <option><?php echo $fname ?></option>
  </select>
  <select id="l_name></select>
</form>

您的脚本应该像这样：

$(document).ready(function(e){
  $("#f_name").change(function(){
    var fname = $('this').val();
    $.ajax({
      type :'POST',
      data :{name:fname},
      url :"fullname.php",
      success : function(data){
        $('#l_name').html('<option>'+data+'</option>');
      }   
    });
  });
});

Answer 2

$(document).ready(function(e){
  $("#f_name").change(function(){
    var fname = $('this').val();
    $.ajax({
      type :'POST',
      data :{name:fname},
      url :"fullname.php",
      success : function(data){    
        for (i in data) {                        
          $("#l_name").html("<option>'+data[i]+'</option>");
        }
      }   
   });
  });
});