mysql jsp省市区三级联动_jQuery+jsp实现省市县三级联动效果(附源码)

本文实例讲述了jQuery+jsp实现省市县三级联动效果的方法。分享给大家供大家参考，具体如下：

在这里，用MySQL数据库存储了全国所有的省市县地区信息(点击此处下载源代码)

使用过的jar包

google的Gson.jar

mysql-connector-java-5.1.13-bin.jar

将实验图贴出来：

显示页面index.jsp

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

省市区三级联动下拉菜单

省份： 城市： 请选择 区(县)： 请选择

function onSelectChange(obj,toSelId){

setSelect(obj.value,toSelId);

}

function setSelect(fromSelVal,toSelId){

//alert(document.getElementById("province").selectedIndex);

document.getElementById(toSelId).innerHTML="";

jQuery.ajax({

url: "/getDropdownDataServlet",

cache: false,

data:"parentId="+fromSelVal,

success: function(data){

createSelectObj(data,toSelId);

}

});

}

function createSelectObj(data,toSelId){

var arr = jsonParse(data);

if(arr != null && arr.length>0){

var obj = document.getElementById(toSelId);

obj.innerHTML="";

var nullOp = document.createElement("option");

nullOp.setAttribute("value","");

nullOp.appendChild(document.createTextNode("请选择"));

obj.appendChild(nullOp);

for(var o in arr){

var op = document.createElement("option");

op.setAttribute("value",arr[o].id);

//op.text=arr[o].name;//这一句在ie下不起作用，用下面这一句或者innerHTML

op.appendChild(document.createTextNode(arr[o].name));

obj.appendChild(op);

}

}

}

setSelect('1','province');

数据库交互GetDropdownDataServlet

public class GetDropdownDataServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws IOException, ServletException {

doPost(request, response);

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws IOException, ServletException {

String parentId = request.getParameter("parentId");

if (parentId == null || parentId == "") {

parentId = "0";

}

Connection conn = null;

String json = "";

try {

Class.forName("com.mysql.jdbc.Driver");

conn = DriverManager.getConnection("jdbc:mysql://localhost/dropdown",

"root", "root");

Statement stat = conn.createStatement();

ResultSet rs = stat

.executeQuery("select region_id,region_name from region where parent_id = "

+ parentId);

ArrayList rsList = new ArrayList();

Map map = null;

while (rs.next()) {

map = new HashMap();

map.put("id", rs.getInt(1));

map.put("name", rs.getString(2));

rsList.add(map);

}

rs = null;

Gson gson = new Gson();

json = gson.toJson(rsList);

System.out.println("json=" + json);

} catch (ClassNotFoundException e) {

e.printStackTrace();

} catch (SQLException e) {

e.printStackTrace();

} finally {

if (conn != null) {

try {

conn.close();

} catch (SQLException e) {

e.printStackTrace();

}

}

}

response.setCharacterEncoding("UTF-8");

response.getWriter().print(json);

}

}

希望本文所述对大家jQuery程序设计有所帮助。