全國城市三級聯動
阿新 • • 發佈：2018-11-09
前端程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <title>全國城市三級聯動</title> <style type="text/css"> .bb { height: 100px; } h1 { color: red; } .box { border: 1px solid rgb(71, 67, 67); height: 200px; width: 500px; margin: auto; text-align: center; } </style> <script type="text/javascript"> var sel1 = document.getElementsByClassName("province"); var sel2 = document.getElementsByClassName("city"); var sel3 = document.getElementsByClassName("town"); //載入所有的省份 function selectPro() { //建立xmlHttprequest物件 var req = new XMLHttpRequest(); req.open("get", "QueryServlet?dowhat=selectPro", true); req.send(); //接受資料 req.onreadystatechange = function() { var data = req.responseText; var obj = eval(data); //動態新增資料 if (req.readyState == 4 && req.status == 200) { for (var i in obj) { var opt = document.createElement("option"); opt.innerHTML = obj[i]; sel1[0].appendChild(opt); opt = sel1[0].children[0]; } } } } //立即執行 selectPro(); //載入所有的市 function selectCity() { sel2[0].options.length = 1; sel3[0].options.length = 1; var opt = sel1[0].children; //建立xmlHttprequest物件 var req = new XMLHttpRequest(); for (i = 0; i < opt.length; i++) { //下拉框的長度就是它的選項數. if (opt[i].selected == true) { var pname = opt[i].text; //獲取當前選擇項的文字. console.log(pname); req.open("get", "QueryServlet?dowhat=selectCity&pname=" + pname, true); req.send(); req.onreadystatechange = function() { var data = req.responseText; var obj = eval(data); //動態新增資料 if (req.readyState == 4 && req.status == 200) { for (var i in obj) { var opt = document.createElement("option"); opt.innerHTML = obj[i]; //console.log(i + "==" + obj[i]); sel2[0].appendChild(opt); opt = sel2[0].children[0]; } } } } } } //載入所有的縣 function selectTown() { sel3[0].options.length = 1; var opt = sel2[0].children; //建立xmlHttprequest物件 var req = new XMLHttpRequest(); for (i = 0; i < opt.length; i++) { //下拉框的長度就是它的選項數. if (opt[i].selected == true) { var cname = opt[i].text; //獲取當前選擇項的文字. console.log(cname); req.open("get", "QueryServlet?dowhat=selectTown&cname=" + cname, true); req.send(); req.onreadystatechange = function() { var data = req.responseText; var obj = eval(data); //動態新增資料 if (req.readyState == 4 && req.status == 200) { for (var i in obj) { var opt = document.createElement("option"); opt.innerHTML = obj[i]; //console.log(i + "==" + obj[i]); sel3[0].appendChild(opt); opt = sel3[0].children[0]; } } } } } } </script> </head> <body> <div class="bb"></div> <div class="box"> <h1>全國城市三級聯動</h1> <select name="province" class="province" onchange="selectCity()"> <option class="one">省份</option> </select> <select name="city" class="city" onchange="selectTown()"> <option>地級市</option> </select> <select name="town" class="town"> <option>市、縣級市</option> </select> </div> </body> </html>
servlet程式碼
req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); resp.setContentType("text/html;charset=utf-8"); QueryService service=new QueryService(); //查詢資料 String dowhat=req.getParameter("dowhat"); //System.out.println(dowhat); if ("selectPro".equals(dowhat)) { List<String>proList=service.getProName(); String json=JSON.toJSONString(proList); resp.getWriter().print(json); }else if ("selectCity".equals(dowhat)) { String pname=req.getParameter("pname"); List<String>cityList=service.getCityNameByProCode(pname); String json=JSON.toJSONString(cityList); resp.getWriter().print(json); }else if ("selectTown".equals(dowhat)) { String cname=req.getParameter("cname"); List<String>townList=service.getTownNameByCityCode(cname); String json=JSON.toJSONString(townList); resp.getWriter().print(json); }
方法
//獲取所有的省份 public List<String> getProName() { List<String>proList=new ArrayList<String>(); Connection con=null; PreparedStatement ps=null; ResultSet rs=null; try { con=MySQLContent.getConnect(); String sql="select t_address_province.name from t_address_province"; ps=con.prepareStatement(sql); rs=ps.executeQuery(); while (rs.next()) { proList.add(rs.getString("name")); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally { MySQLContent.closeAll(rs, ps, con); } return proList; } //獲取所有的市的名字 public List<String> getCityNameByProCode(String pname) { List<String>cityList=new ArrayList<String>(); Connection con=null; PreparedStatement ps=null; ResultSet rs=null; try { con=MySQLContent.getConnect(); String sql="SELECT t_address_city.name FROM t_address_city WHERE t_address_city.provinceCode = (select code from t_address_province WHERE name=?)"; ps=con.prepareStatement(sql); ps.setString(1, pname); rs=ps.executeQuery(); while (rs.next()) { cityList.add(rs.getString("name")); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally { MySQLContent.closeAll(rs, ps, con); } return cityList; } //獲取所有的縣的名字 public List<String> getTownNameByCityCode(String cname) { List<String>townList=new ArrayList<String>(); Connection con=null; PreparedStatement ps=null; ResultSet rs=null; try { con=MySQLContent.getConnect(); String sql="SELECT t_address_town.`name` FROM t_address_town WHERE t_address_town.cityCode=(SELECT `code` FROM t_address_city WHERE `name`=?)"; ps=con.prepareStatement(sql); ps.setString(1, cname); rs=ps.executeQuery(); while (rs.next()) { townList.add(rs.getString("name")); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally { MySQLContent.closeAll(rs, ps, con); } return townList; }
資料庫連線程式碼都是死套路，可以自己寫也可以看我的資料庫連線https://blog.csdn.net/qq_41534115/article/details/83272484