二级联动----省市级联

Posted 2020-09-27 波光闪烁

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了二级联动----省市级联相关的知识，希望对你有一定的参考价值。

bean

/**
 * 市
 * @author Administrator
 *下午3:37:43
 */
public class City {
    private int id; //序号
    private int cityid; 
    private String cityname; //城市名称
}

/**
 * 省
 * @author Administrator
 *下午3:37:57
 */
public class Province {
    private int id; //序号
    private int provinceId;
    private String province; //省名
    private List<City> cities; //每个省下面的每个城市
}

dao.impl

public class ProvinceDaoImpl implements ProvinceDao{
    QueryRunner qr = new QueryRunner(C3p0Util.getDataSource()); //c3p0连接池连接数据库
    @Override
    //查找所有省的集合
    public List<Province> findPros() {
        String sql = "select * from provinces";
        List<Province> plist = null;
        try {
            plist = qr.query(sql, new BeanListHandler<Province>(Province.class));
        } catch (SQLException e) {
            e.printStackTrace();
        }
        for(Province p : plist){
            List<City> findCitiesByProID = findCitiesByProID(p.getProvinceId());
            p.setCities(findCitiesByProID);
        }
        return plist;
    }
    @Override
    //使用proid查找每个省相对应的城市
    public List<City> findCitiesByProID(int proid) {
        String querySql = "select * from citys where proid=?";
        List<City> cities = null;
        try {
            cities = qr.query(querySql, new BeanListHandler<City>(City.class), proid);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return cities;
    }
}

Servlet

@WebServlet(name="proCityServlet",value="/proCityServlet")  //注解配置
public class ProCityServlet extends HttpServlet {
    private ProvinceDao dao = new ProvinceDaoImpl();
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html; charset=UTF-8"); //响应编码格式
        response.setCharacterEncoding("UTF-8");
        List<Province> pros = dao.findPros();
        System.out.println(pros);
        Gson gson = new Gson(); //将集合转为json 需要导入Gson jar包
        String str = gson.toJson(pros);  //转换为JSON格式
        System.out.println(str); //显示所有json,可以新建一个html 右击Format后方便查找json
        response.getWriter().print(str); //响应至浏览器
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
}

js页面

$(function(){
    var $proSelect = $("#province"); //省节点
    var $citySelect = $("#city"); //市节点
    $.getJSON(
        "../proCityServlet",    //servlet url
        {},
        function(data){  //发送到服务器的数据
            //显示所有省份
            for(var i=0;i<data.length;i++){
                var proName = data[i].province; //循环遍历所有的省节点
                //追加省节点
                var $proOption = $("<option value="+data[i].provinceId+">"+proName+"</option>");
                $proSelect.append($proOption); 
            }
            //显示对应的城市
            $proSelect.change(function(){  //切换省节点时触发事件
                //重复切换后删除value 不为空的,避免叠加  
                $("#city>option[value!=‘‘]").remove();
                var proId = $(this).val();  
                for (var i = 0; i < data.length; i++) {
                    if(data[i].provinceId == proId){  //手动切换到的省节点与查找到的省节点相等 
                        var getCitys = data[i].cities;  //获取到对应的城市集合
                        for(var y=0;y<getCitys.length;y++){ 
                            var cname = getCitys[y].cityname; //获取到对应城市名
                            var $cityOption = $("<option value="+getCitys[y].cityid+">"+cname+"</option>"); //创造新option节点
                            $citySelect.append($cityOption);  //追加option节点
                        }
                    }
                }
            });
        }
    );
});

jsp显示页面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <!-- 导入jQuery包 -->
<script type="text/javascript" src="city.js"></script> <!-- 导入js页面 -->
</head>
<body>
    省份：<select id="province">
            <option value="">--请选择省份--</option>
          </select>
    城市：<select id="city">
            <option value="">--请选择城市--</option>
        </select>
</body>
</html>

这样一来,我们切换省级下拉列表后,市级列表都与每个省级相对应。

以上是关于二级联动----省市级联的主要内容，如果未能解决你的问题，请参考以下文章

Element UI 中国省市区级联选择器

html级联搜索,html省市级联(select联动)示例源码