纯JSP+DWR实现三级联动下拉选择菜单实现技巧

纯JSP+DWR实现三级联动下拉选择菜单，可以参考以下步骤：

首先创建一个JSP页面，其中需要引入DWR JavaScript库和JQuery，这里以使用CDN资源为例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三级联动选择菜单</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dwr/3.0.2/dwr.min.js"></script>
    <script src="js/china.js"></script>
</head>
<body>
    <form>
        <!--省份-->
        <select id="province" onchange="getCity()">
            <option value="">请选择省份</option>
            <!--调用DWR方法动态生成省份列表-->
            <script type="text/javascript">
                dwr.engine.setActiveReverseAjax(true);
                ProvinceService.getProvince(function (list) {
                    for (var i = 0; i < list.length; i++) {
                        document.write("<option value='" + list[i].id + "'>" + list[i].name + "</option>");
                    }
                });
            </script>
        </select>
        <!--城市-->
        <select id="city" onchange="getDistrict()">
            <option value="">请选择城市</option>
        </select>
        <!--区县-->
        <select id="district">
            <option value="">请选择区县</option>
        </select>
    </form>
    <script src="js/select.js"></script>
</body>
</html>

创建一个JavaScript文件，名为select.js，在其中添加以下代码：

function getCity() {
    //获取省份id
    var provinceId = $('#province').val();
    //调用DWR方法动态获取城市列表
    CityService.getCityByProvinceId(provinceId, function (list) {
        //清空原有的城市和区县列表
        $('#city').empty().append("<option value=''>请选择城市</option>");
        $('#district').empty().append("<option value=''>请选择区县</option>");
        //循环遍历城市列表，将城市添加到对应的下拉框选项中
        for (var i = 0; i < list.length; i++) {
            $('#city').append("<option value='" + list[i].id + "'>" + list[i].name + "</option>");
        }
    });
}

function getDistrict() {
    //获取城市id
    var cityId = $('#city').val();
    //调用DWR方法动态获取区县列表
    DistrictService.getDistrictByCityId(cityId, function (list) {
        //清空原有的区县列表
        $('#district').empty().append("<option value=''>请选择区县</option>");
        //循环遍历区县列表，将区县添加到对应的下拉框选项中
        for (var i = 0; i < list.length; i++) {
            $('#district').append("<option value='" + list[i].id + "'>" + list[i].name + "</option>");
        }
    });
}

创建一个Java类ProvinceService，使用DWR注解标识为服务，

import java.util.ArrayList;
import java.util.List;
public class ProvinceService {
    public static List<Province> getProvince() {
        List<Province> list = new ArrayList<>();
        for (int i = 0; i < China.PROVINCES.length; i++) {
            Province province = new Province();
            province.setId(i);
            province.setName(China.PROVINCES[i][0]);
            list.add(province);
        }
        return list;
    }
}

创建一个Java类CityService和一个Java类DistrictService，也使用DWR注解标识为服务。

import java.util.ArrayList;
import java.util.List;
public class CityService {
    public static List<City> getCityByProvinceId(int provinceId) {
        List<City> list = new ArrayList<>();
        for (int i = 0; i < China.PROVINCES[provinceId][1].length; i++) {
            City city = new City();
            city.setId(i);
            city.setName(China.PROVINCES[provinceId][1][i][0]);
            city.setProvinceId(provinceId);
            list.add(city);
        }
        return list;
    }
}

import java.util.ArrayList;
import java.util.List;
public class DistrictService {
    public static List<District> getDistrictByCityId(int cityId) {
        List<District> list = new ArrayList<>();
        int provinceId = China.CITY[cityId][0];
        for (int i = 0; i < China.PROVINCES[provinceId][1][cityId][1].length; i++) {
            District district = new District();
            district.setId(i);
            district.setName(China.PROVINCES[provinceId][1][cityId][1][i]);
            district.setCityId(cityId);
            list.add(district);
        }
        return list;
    }
}

创建Java实体类Province、City和District，分别包含省份、城市和区县的id和name属性。

public class Province {
    private int id;
    private String name;
    //setter和getter方法省略
}

public class City {
    private int id;
    private String name;
    private int provinceId;
    //setter和getter方法省略
}

public class District {
    private int id;
    private String name;
    private int cityId;
   //setter和getter方法省略
}

最后，还需要导入中国省市县数据，以静态数据China来模拟数据库，文件命名为china.js

```javascript
var China={
"PROVINCES": [
["北京市", [["市辖区", ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县"]]]],
["天津市", [["市辖区", ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "塘沽区", "汉沽区", "大港区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "宁河县", "静海县", "蓟县"]]]],
["河北省", [["石家庄市", ["长安区", "桥东区", "桥西区", "新华区", "井陉矿区", "裕华区", "井陉县", "正定县", "栾城县", "行唐县", "灵寿县", "高邑县", "深泽县", "赞皇县", "无极县","平山县", "元氏县", "赵县", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市"]], ["唐山市", ["路南区", "路北区", "古冶区", "开平区", "丰南区", "丰润区", "滦县", "滦南县", "乐亭县", "迁西县", "玉田县", "唐海县", "遵化市", "迁安市"]], ["秦皇岛市", ["海港区", "山海关区", "北戴河区", "青龙满族自治县", "昌黎县", "抚宁县", "卢龙县"]], ["邯郸市", ["邯山区", "丛台区", "复兴区", "峰峰矿区", "邯郸县", "临漳县", "成安县", "大名县", "涉县", "磁县", "肥乡县", "永年县","邱县", "鸡泽县", "广平县", "馆陶县", "魏县", "曲周县", "武安市"]], ["邢台市", ["桥东区", "桥西区", "邢台县", "临城县", "内丘县", "柏乡县", "隆尧县", "任县", "南和县", "宁晋县", "巨鹿县", "新河县", "广宗县", "平乡县", "威县", "清河县", "临西县", "南宫市", "沙河市"]], ["保定市", ["新市区", "北市区", "南市区", "满城县", "清苑县", "涞水县", "阜平县", "徐水县", "定兴县", "唐县", "高阳县", "容城县", "涞源县", "望都县", "安新县", "易县", "曲阳县", "蠡县", "顺平县", "博野县", "雄县", "涿州市", "定州市", "安国市", "高碑店市"]], ["张家口市", ["桥东区", "桥西区", "宣化区", "下花园区", "宣化县", "张北县", "康保县", "沽源县", "尚义县", "蔚县", "阳原县", "怀安县", "万全县", "怀来县", "涿鹿县", "赤城县", "崇礼县"]], ["承德市", ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "兴隆县", "平泉县", "滦平县", "隆化县", "丰宁满族自治县", "宽城满族自治县", "围场满族蒙古族自治县"]], ["沧州市", ["新华区", "运河区", "沧县", "青县", "东光县", "海兴县", "盐山县", "肃宁县", "南皮县", "吴桥县", "献县", "孟村回族自治县", "泊头市", "任丘市", "黄骅市", "河间市"]], ["廊坊市", ["安次区", "广阳区", "固安县", "永清县", "香河县", "大城县", "文安县", "大厂回族自治县", "霸州市", "三河市"]], ["衡水市", ["桃城区", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景县", "阜城县", "冀州市", "深州市"]]]
],
"CITY": [
[0, [["东城区", []], ["西城区", []], ["崇文区", []], ["宣武区", []], ["朝阳区", []], ["丰台区", []], ["石景山区", []], ["海淀区", []], ["门头沟区", []], ["房山区", []], ["通州区", []], ["顺义区", []], ["昌平区", []], ["大兴区", []], ["怀柔区", []], ["平谷区", []], ["密云县", []], ["延庆县", []]]],
[1, [["和平区", []], ["河东区", []], ["河西区", []], ["南开区", []], ["河北区", []], ["红桥区", []], ["塘沽区", []], ["汉沽区", []], ["大港区", []], ["东丽区", []], ["西青区", []], ["津南区", []], ["北辰区", []], ["武清区", []], ["宝坻区", []], ["宁河县", []], ["静海县", []], ["蓟县", []]]],
[2, [["长安区", []], ["桥东区", []], ["桥西区", []], ["新华区", []], ["井陉矿区", []], ["裕华区", []], ["井陉县", []], ["正定县", []], ["栾城县", []], ["行唐县", []], ["灵寿县", []], ["高邑县", []], ["深泽县", []], ["赞皇县", []], ["无极县", []], ["平山县", []], ["元氏县", []], ["赵县", []], ["辛集市", []], ["藁城市", []], ["晋州市", []], ["新乐市", []], ["鹿泉市", []]]],
[3, [["路南区", []], ["路北区", []], ["古冶区", []], ["开平区", []], ["丰南区", []], ["丰润区", []], ["滦县", []], ["滦南县", []], ["乐亭县", []], ["迁西县", []], ["玉田县", []], ["唐海县", []], ["遵化市", []], ["迁安市", []]]],
[4, [["海港区", []], ["山海关区", []], ["北戴河区", []], ["青龙满族自治县", []], ["昌黎县", []], ["抚宁县", []], ["卢龙县", []]]],
[5, [["邯山区", []], ["丛台区", []], ["复兴区", []], ["峰峰矿区", []], ["邯郸县", []], ["临漳县", []], ["成安县", []], ["大名县", []], ["涉县", []], ["磁县", []], ["肥乡县", []], ["永年县", []], ["邱县", []], ["鸡泽县", []], ["广平县", []], ["馆陶县", []], ["魏县", []], ["曲周县", []], ["武安市", []]]],
[6, [["桥东区", []], ["桥西区", []], ["邢台县", []], ["临城县", []], ["内丘县", []], ["柏乡县", []], ["隆尧县", []], ["任县", []], ["南和县", []], ["宁晋县", []], ["巨鹿县", []], ["新河县", []], ["广宗县", []], ["平乡县", []], ["威县", []], ["清河县", []], ["临西县", []], ["南宫市", []], ["沙河市", []]]],
[7, [["桥东区", []], ["桥西区", []], ["宣化区", []], ["下花园区", []], ["宣化县", []], ["张北县", []], ["康保县", []], ["沽源县", []], ["尚义县", []], ["蔚县", []], ["阳原县", []], ["怀安县", []], ["万全县", []], ["怀来县", []], ["涿鹿县", []], ["赤城县", []

阅读剩余 74%

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯JSP+DWR实现三级联动下拉选择菜单实现技巧 - Python技术站

纯JSP+DWR实现三级联动下拉选择菜单实现技巧

相关文章

分享到: