三级下拉框前后端代码

• html

<select id="select1">
  <option value="">请选择省份</option>
  <option value="广东省">广东省</option>
  <option value="江苏省">江苏省</option>
  <option value="浙江省">浙江省</option>
</select>

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

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

<button id="submitBtn">提交</button>

jq

$(function() {
  // 当第一个下拉框的值改变时，获取对应的城市列表
  $('#select1').change(function() {
    var province = $(this).val();
    $.ajax({
      url: '/get_cities',  // 后端处理该请求的路由
      type: 'POST',
      data: {'province': province},
      dataType: 'json',
      success: function(data) {
        // 清空原有的城市列表
        $('#select2').empty();
        $('#select3').empty();
        // 添加新的城市列表
        $.each(data.cities, function(index, city) {
          $('#select2').append('<option value="' + city + '">' + city + '</option>');
        });
      }
    });
  });

  // 当第二个下拉框的值改变时，获取对应的区县列表
  $('#select2').change(function() {
    var province = $('#select1').val();
    var city = $(this).val();
    $.ajax({
      url: '/get_counties',  // 后端处理该请求的路由
      type: 'POST',
      data: {'province': province, 'city': city},
      dataType: 'json',
      success: function(data) {
        // 清空原有的区县列表
        $('#select3').empty();
        // 添加新的区县列表
        $.each(data.counties, function(index, county) {
          $('#select3').append('<option value="' + county + '">' + county + '</option>');
        });
      }
    });
  });

  // 点击提交按钮时，将用户选择的内容传递给后端
  $('#submitBtn').click(function() {
    var province = $('#select1').val();
    var city = $('#select2').val();
    var county = $('#select3').val();
    $.ajax({
      url: '/submit_selection',  // 后端处理该请求的路由
      type: 'POST',
      data: {'province': province, 'city': city, 'county': county},
      dataType: 'json',
      success: function(data) {
        // 处理后端返回的结果
      }
    });
  });
});

python flask

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/get_cities', methods=['POST'])
def get_cities():
    province = request.form.get('province')
    # 根据省份获取对应的

============================

只选择第三个框，改变了就触发ajax。后端使用django的情况：
js

$(function() {
  // 当第三个下拉框的值改变时，获取用户选择的内容并传递给后端
  $('#select3').change(function() {
    var province = $('#select1').val();
    var city = $('#select2').val();
    var county = $(this).val();
    $.ajax({
      url: '/submit_selection',  // 后端处理该请求的路由
      type: 'POST',
      data: {'province': province, 'city': city, 'county': county},
      dataType: 'json',
      success: function(data) {
        // 处理后端返回的结果
      }
    });
  });
});

python django

from django.http import JsonResponse

def submit_selection(request):
    province = request.POST.get('province')
    city = request.POST.get('city')
    county = request.POST.get('county')
    # 根据省、市、县进行相应的处理
    result = {'status': 'success', 'message': '请求已处理'}
    return JsonResponse(result)

在这个示例代码中，我们使用了Django内置的JsonResponse方法来返回一个JSON格式的响应，其中包含了请求处理的结果信息。

需要注意的是，在使用Ajax发送请求时，我们指定了dataType为json，这样在接收到后端的响应时，jQuery会自动将响应解析为JSON格式的数据。同时，在Django视图函数中，我们使用了request.POST.get方法来获取POST请求中携带的参数。