Jquery+ajax实现三级级联下拉菜单

三级级联下拉菜单可以通过Jquery+Ajax实现，以下是一个简单的示例代码：

HTML代码：

<select id="province">
  <option value="">请选择省份</option>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="广东">广东</option>
</select>

<select id="city">
  <option value="">请选择城市</option>
</select>

<select id="district">
  <option value="">请选择区县</option>
</select>

Jquery+Ajax代码：

$(document).ready(function() {
  // 加载省份列表
  $.ajax({
    type: "GET",
    url: "province.php",
    success: function(data) {
      $("#province").append(data);
    }
  });

  // 省份选项改变时，加载城市列表
  $("#province").change(function() {
    var province = $(this).val();
    $("#city").html("<option value=''>请选择城市</option>");
    $("#district").html("<option value=''>请选择区县</option>");
    if (province != "") {
      $.ajax({
        type: "GET",
        url: "city.php",
        data: {"province": province},
        success: function(data) {
          $("#city").append(data);
        }
      });
    }
  });

  // 城市选项改变时，加载区县列表
  $("#city").change(function() {
    var province = $("#province").val();
    var city = $(this).val();
    $("#district").html("<option value=''>请选择区县</option>");
    if (city != "") {
      $.ajax({
        type: "GET",
        url: "district.php",
        data: {"province": province, "city": city},
        success: function(data) {
          $("#district").append(data);
        }
      });
    }
  });
});

在省份、城市、区县列表对应的php文件中，需要根据传入的参数返回对应的选项列表。例如，city.php文件可能如下所示：

$province = $_GET["province"];
echo "<option value=''>请选择城市</option>";
if ($province == "北京") {
  echo "<option value='北京市'>北京市</option>";
} else if ($province == "上海") {
  echo "<option value='上海市'>上海市</option>";
} else if ($province == "广东") {
  echo "<option value='广州市'>广州市</option>";
  echo "<option value='深圳市'>深圳市</option>";
  echo "<option value='珠海市'>珠海市</option>";
}

类似地，district.php文件也需要根据传入的参数返回对应的选项列表。