使用Jquery和Ajax请求对应省份的城市

初始下拉框：

<select id="province">
            <option value="">选择省份</option>
            <option value="jiangsu">江苏省</option>
            <option value="zhejiang">浙江省</option>
            <option value="guangdong">广东省</option>
        </select>
        <select id="city">
            <option>选择城市</option>
        </select>

给下拉框选项值改变后添加事件：

    //选项改变后执行getVal()方法获取城市列表
    $('#province').on('change', function() {
        getVal();
    });

 在getVal()方法中实现对城市列表的请求和添加

//获得城市列表
function getVal() {
    //获得省份的值
    let optical = $("#province option:checked").val();
    console.log(optical);
    $.ajax({
        type: "get",
        url: '../jsp/selCityDoArray.jsp', // selCityDoArray.jsp文件相对于当前页面的路径
        data: { // 提交到服务器的数据
            provinceVal: optical
        },
        dataType: 'json', // 服务器返回的数据类型为json格式
        success: function(response) { // 请求成功的回调函数
            // 将城市信息作为option选项增加到城市下拉列表
            let citySelect = $('#city');
            citySelect.empty(); // 清空原有选项
            // 遍历response数组中的每一个城市信息，并将其加入到选项中
            $.each(response, function(i, city) {
                //添加新选项
                citySelect.append(new Option(city.text,city.value));
            });
        },
        error: function(xhr, status, error) { // 请求失败的回调函数
            console.error('请求失败:', error);
        }
    });
}

在JSP文件中处理服务器端的逻辑功能：

    // 获取省份值
    String provinceVal = request.getParameter("provinceVal");

    // 模拟数据源，这里使用Map来存储省份和城市的对应关系
    Map<String, List<String>> data = new HashMap<String, List<String>>();
    List<String> citiesOfJiangSu = new ArrayList<String>(Arrays.asList("南京市","苏州市","宿迁市","无锡市","常州市"));
    List<String> citiesOfZheJiang = new ArrayList<String>(Arrays.asList("杭州市","绍兴市","嘉兴市"));
    List<String> citiesOfGuangdong = new ArrayList<String>(Arrays.asList("广州市", "深圳市", "珠海市"));
    data.put("jiangsu", citiesOfJiangSu);
    data.put("zhejiang", citiesOfZheJiang);
    data.put("guangdong", citiesOfGuangdong);

    // 构造JSONArray
    JSONArray jsonArray = new JSONArray();
    if (provinceVal != null) {
        // 根据省份值获取城市列表
        List<String> cities = data.get(provinceVal.toLowerCase());
        if (cities != null) {
            // 遍历城市列表，构造JSONObject
            for (String city : cities) {
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("text", city);
                jsonObject.put("value", city.toLowerCase());
                jsonArray.add(jsonObject);
            }
        }
    }

    // 将数据返回到客户端
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(jsonArray.toJSONString());
// 输出类似于：[{text:"南京市",value:"nanjing"}]

效果如下