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

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

使用过的冲突包

谷歌的gson。jarmysql-连接器-Java-5。1 .13-bin。冲突

将实验图贴出来：

显示页面index.jsp

“% @”页面语言=“Java”导入=“Java”。乌提尔。*“页面编码=”UTF-8“% %字符串路径=请求。getcontextpath()；字符串基本路径=请求。getscheme()' ://'请求。getservername()“:”请求。getserverport()“路径”/；%!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML头基href=' %=基路径% '标题省市区三级联动下拉菜单/title脚本类型=' text/JavaScript ' src=' http :%=path %/js/jquery/jquery-1.7。量滴js /脚本脚本类型=' text/JAVAScript ' src=' http :%=path %/js/JSON/JSON-minified。js /脚本/头体表tr td省份：选择名称='省份id='省份onchange='onSelectChange(此处为'城市');/select城市：选择名称=' city ' id=' city ' onchange=' onSelectChange(这是区’)；选项值=' '请选择/option /select区（县):选择名称='地区id='地区'选项值=' '请选择/option/select/TD/tr/table/body/html脚本类型=' text/JavaScript '函数on selectchange(obj，toSelId){ setSelect(obj.value，to selid)；}函数集选择(从SelVal，到selid){//alert(文档。getelementbyid('省份')。selectedIndex)；文件。getelementbyid(to selid).innerHTML=jquery。Ajax({ URL : ' %=路径%/getdropdowdataservlet '，cache: false，data:'parentId=' fromSelVal，success:函数（数据){ createSelectObj(数据，到selid)；} });}函数createSelectObj(data，to selid){ var arr=jsonpalse(data)；如果(arr！=空arr。长度0){ var obj=document。getelementbyid(to selid)；obj . innerhtml=var NullOp=document。create element(' option ')；nullOp.setAttribute('value '，' ')；努洛普。appendchild(文档。createtextnode('请选择'));物体。append child(NullOp)；for(var o in arr){ var op=document。创建元素('选项')；op.setAttribute('value '，arr[o]).id)；//op.text=arr[o].姓名；//这一句在工程师协会下不起作用，用下面这一句或者innerHTML op . appendchild(文档。createtextnode(arr[o]).姓名));物体。阑尾切除术；} }}setSelect('1 '，'省');/script数据库交互GetDropdownDataServlet

公共类GetDropdownDataServlet扩展了httpersvlet { public void DoGet(httpersvletrequest请求，HttpServletResponse响应)抛出IOException，ServletException { doPost(请求，响应);} public void doPost(HttpServletrequest请求，HttpServletResponse响应)引发IOException，ServletException { String ParentID=请求。GetParameter(' ParentID ')；if(ParentID==null | | ParentID==' '){ ParentID=' 0 '；}连接连接=空；字符串json=尝试{类。FOrname(' com。MySQL。JDBC。驱动程序')；conn=驱动程序管理器。GetConnection(' JDBC :我的SQL ://localhost/下拉'，' root '，' root ')；语句stat=conn . create statement()；结果集rs=stat .executeQuery('从parent_id=' parentId '的区域中选择region_id，region _ name ArrayList rsList=new ArrayList()；Map map=nullwhile(RS。next()){ map=new HashMap()；map.put('id '，RS)。GetInt(1))；map.put('name '，RS。getString(2))；回复列表。添加(地图)；} RS=NullGson Gson=new Gson()；JSON=gson。转到JSON(RSLiST)；系统。出去。println(' JSON=' JSON ')；} catch(ClassNotFoundException e){ e . printstacktrace()；} catch(SQLException e){ e . printstacktrace()；}最后{ if (conn！=null){ try { conn . close()；} catch(SQLException e){ e . printstacktrace()；} } }响应。setcharacter encoding(' UTF-8 ')；response.getWriter().印刷(JSON)；}}希望本文所述对大家jQuery程序设计有所帮助。