使用ajax做一个省市县三级联动

可以使用以下代码实现省市县三级联动：

HTML代码：

<select id="province">
  <option value="">请选择省份</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="county">
  <option value="">请选择县区</option>
</select>

JavaScript代码：

$(function(){
  // 加载省份列表
  $.ajax({
    type: "GET",
    url: "province.php",
    dataType: "json",
    success: function(data){
      for(var i=0; i<data.length; i++){
        $("#province").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
      }
    }
  });
  
  // 省份改变时加载城市列表
  $("#province").change(function(){
    var province_id = $(this).val();
    $("#city").empty().append("<option value=''>请选择城市</option>");
    $("#county").empty().append("<option value=''>请选择县区</option>");
    if(province_id != ""){
      $.ajax({
        type: "GET",
        url: "city.php",
        data: {"province_id":province_id},
        dataType: "json",
        success: function(data){
          for(var i=0; i<data.length; i++){
            $("#city").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
          }
        }
      });
    }
  });
  
  // 城市改变时加载县区列表
  $("#city").change(function(){
    var city_id = $(this).val();
    $("#county").empty().append("<option value=''>请选择县区</option>");
    if(city_id != ""){
      $.ajax({
        type: "GET",
        url: "county.php",
        data: {"city_id":city_id},
        dataType: "json",
        success: function(data){
          for(var i=0; i<data.length; i++){
            $("#county").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
          }
        }
      });
    }
  });
});

其中，province.php、city.php、county.php 分别返回省份、城市、县区的列表数据，格式为 JSON。在这里，我们使用 jQuery 的 ajax 方法来异步加载数据，并在成功回调函数中将数据填充到相应的下拉框中。