二級聯動----省市級聯

時間 2019-11-15

標籤二級聯動省市級聯简体版

原文原文鏈接

beanjavascript

/**
 * 市
 * @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.implhtml

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;
    }
}

Servletjava

@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頁面jquery

$(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顯示頁面sql

<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>

這樣一來,咱們切換省級下拉列表後,市級列表都與每一個省級相對應。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。