jquery实现三级联动效果

xiaoxiao2021-02-28 129

1.Jsp主页面：

<%@ page language="java" pageEncoding="gbk"%> <% 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> <base href="<%=basePath%>"> <title>三级联动</title> </head> <script src="js/jquery.1.3.2.min.js"></script> <script language="javascript"> function checkSg(){ var sg=$("#sheng").val(); var xn=$("#xian").val(); jQuery.ajax({ type:"post", cache:false, url:"Three2.jsp", data:{sheng:sg}, dataType:"text", success:function(response){ $('#shi').html(response); }, error:function(xmlhttprequest,msg,errorobj){ alert(msg); } }); if(sg==""){ $("#xian").html("<option val=''>--请选择县--</option>"); } } function checkSi(){ var sg=$("#sheng").val(); var si=$("#shi").val(); jQuery.ajax({ type:"post", cache:false, url:"Three3.jsp", data:{sheng:sg,shi:si}, dataType:"text", success:function(response){ $('#xian').html(response); }, error:function(xmlhttprequest,msg,errorobj){ alert(msg); } }); } </script> <body> <div> <form name="form1" method="post" action="Test3.jsp"> <table> <tr id="ssx"> <td id="sg">省</td> <td> <select id="sheng" οnchange="checkSg()"> <option value="" selected="selected">--请选择省--</option> <option id="ah" value="ah">安徽</option> <option id="js" value="js">江苏</option> <option id="zj" value="zj">浙江</option> </select> </td> <td id="si">市</td> <td> <select id="shi" οnchange="checkSi()"/> <option value="" selected="selected">--请选择市--</option> </select> </td> <td id="xn">县</td> <td> <select id="xian"> <option value="" selected="selected">--请选择县--</option> </select> </td> </tr> <tr> <td><input type="submit" value="提交" /></td> </tr> </table> </form> </div> </body> </html>

2.后台交互页面1

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <% request.setCharacterEncoding("utf-8"); String sheng=request.getParameter("sheng"); List list=new ArrayList(); if(sheng.equals("ah")){ list.add("合肥"); list.add("蚌埠"); list.add("宿州"); }else if(sheng.equals("zj")){ list.add("杭州"); list.add("桐乡"); list.add("海宁"); }else if(sheng.equals("js")){ list.add("盐城"); list.add("苏州"); list.add("无锡"); } if(list.size()>=0){ out.print("<option val=''>--请选择市--</option>"); for(int i=0;i<list.size();i++){ out.print("<option value=\""+(i+1)+"\">"+list.get(i)+"</option>"); } }else{ throw new RuntimeException("No data found."); }

3.后台交互页面2：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <% request.setCharacterEncoding("utf-8"); String sheng=request.getParameter("sheng"); String shi=request.getParameter("shi"); List list=new ArrayList(); if(sheng.equals("ah")&&shi.equals("1")){ list.add("包头"); list.add("蜀山"); list.add("高新"); }else if(sheng.equals("ah")&&shi.equals("2")){ list.add("五河"); list.add("固镇"); list.add("怀远"); }else if(sheng.equals("ah")&&shi.equals("3")){ list.add("泗县"); list.add("灵璧"); list.add("徐县"); }else if(sheng.equals("zj")&&shi.equals("1")){ list.add("滨江"); list.add("桐庐"); list.add("淳安"); }else if(sheng.equals("zj")&&shi.equals("2")){ list.add("留良"); list.add("石门"); list.add("大麻"); }else if(sheng.equals("zj")&&shi.equals("3")){ list.add("海宁新世纪幼儿园"); list.add("海宁街道办"); list.add("海宁中学"); }else if(sheng.equals("js")&&shi.equals("1")){ list.add("盐城中学"); list.add("盐城街道办"); list.add("盐城县"); }else if(sheng.equals("js")&&shi.equals("2")){ list.add("苏州市政府"); list.add("苏州幼儿园"); list.add("苏州街道办"); }else if(sheng.equals("js")&&shi.equals("3")){ list.add("无锡化工厂"); list.add("无锡达内机构"); list.add("无锡街道办"); } if(list.size()>=0){ out.print("<option val=''>--请选择县--</option>"); for(int i=0;i<list.size();i++){ out.print("<option name=\"\" value=\""+(i+1)+"\">"+list.get(i)+"</option>"); } }else{ throw new RuntimeException("No data found."); } %>

转载请注明原文地址: https://www.6miu.com/read-47237.html

技术

最新回复(0)