三級聯動JQuery
阿新 • • 發佈：2018-12-19
原始碼地址：https://download.csdn.net/download/qq_43532342/10858690
省市區三千條Sql資料：https://download.csdn.net/download/qq_43532342/10858000
拼接式：
$(function(){ $.post( 'province.do', function(objs){ var province=$('#pid'); for(var i=0;i<objs.length;i++){ var pid=objs[i].pid; var pname=objs[i].pname; province.append("<option value='"+pid+"'>"+pname+"</option>"); } },'json' ); }) $(function(){ $("#pid").change(function(){ var city=$("#cid"); $('#cid option:gt(0)').remove(); var pro=$(this).val(); $.post( 'city.do?pid='+pro, function(objs){ for(var i=0;i<objs.length;i++){ var pid=objs[i].cid; var pname=objs[i].cname; city.append("<option value='"+pid+"'>"+pname+"</option>"); } },'json' ) }); }) $(function(){ $("#cid").change(function(){ var area=$("#aid"); $('#aid option:gt(0)').remove(); var pro=$(this).val(); $.post( 'area.do?cid='+pro, function(objs){ for(var i=0;i<objs.length;i++){ var pid=objs[i].aid; var pname=objs[i].aname; area.append("<option value='"+pid+"'>"+pname+"</option>"); } },'json' ) }) })
前端程式碼：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>三級聯動</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/address.js"></script> </head> <body> <select id="pid" onchange="getCity()"> <option>省</option> </select> <select id="cid" onchange="getArea()"> <option>市</option> </select> <select id="aid"> <option>區</option> </select> </body> </html>
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <welcome-file-list> <welcome-file>hc.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>area</servlet-name> <servlet-class>com.hc.servlet.area</servlet-class> </servlet> <servlet-mapping> <servlet-name>area</servlet-name> <url-pattern>/area.do</url-pattern> </servlet-mapping> <servlet> <servlet-name>city</servlet-name> <servlet-class>com.hc.servlet.city</servlet-class> </servlet> <servlet-mapping> <servlet-name>city</servlet-name> <url-pattern>/city.do</url-pattern> </servlet-mapping> <servlet> <servlet-name>province</servlet-name> <servlet-class>com.hc.servlet.province</servlet-class> </servlet> <servlet-mapping> <servlet-name>province</servlet-name> <url-pattern>/province.do</url-pattern> </servlet-mapping> </web-app>