基于AJAX的级联下拉菜单

级联下拉菜单是指有多个下拉菜单，其中后面的菜单内容会根据前面的菜单选择动态刷新。基于AJAX的级联下拉菜单可以通过异步请求后台数据，实现动态更新菜单内容，提高交互性和用户体验。

下面是一个基于AJAX的级联下拉菜单的示例代码：

HTML部分：

<select id="province">
  <option value="">请选择省份</option>
  <option value="1">广东省</option>
  <option value="2">江苏省</option>
  <option value="3">浙江省</option>
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>

JS部分：

$(function(){
  // 当省份下拉菜单改变时，动态更新城市下拉菜单
  $('#province').change(function(){
    var provinceId = $(this).val();
    if(provinceId){
      $.ajax({
        url: '/getCityListByProvinceId',
        type: 'POST',
        data: {provinceId: provinceId},
        dataType: 'json',
        success: function(data){
          var options = '<option value="">请选择城市</option>';
          $.each(data, function(index, item){
            options += '<option value="'+item.id+'">'+item.name+'</option>';
          });
          $('#city').html(options);
        }
      });
    } else {
      $('#city').html('<option value="">请选择城市</option>');
    }
  });
});

上述代码中，当省份下拉菜单改变时，会向后台发送一个POST请求，请求参数为省份ID。后台返回城市列表数据，前端根据数据动态生成城市下拉菜单选项，替换原有的选项。如果省份没有选择，则清空城市下拉菜单内容。