ajax+jQuery实现级联显示地址的方法
本文实例讲述了ajax+jQuery实现级联显示地址的方法。分享给大家供大家参考。具体实现方法如下:
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> <html> <head> <title>初始化HELLO</title> <scripttype="text/javascript"src="../../js/jquery.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ varstr1='${str}'; varstrArr=str1.split(","); vark; for(k=0;k<strArr.length;k++) { $.ajax({ async:false,//原来是这样,不然AJAX是一起发送的,加上这个的话,就保证这个请求有结果,才会发下一个请求 url:'init.action',//请求的URL cache:false,//不从缓存中取数据 data:{pid:strArr[k]},//发送的参数 type:'Get',//请求类型 dataType:'json',//返回类型是JSON timeout:20000,//超时 error:function()//出错处理 { alert("程序出错!"); }, success:function(json)//成功处理 { varlen=json.length;//得到查询到数组长度 if(strArr[k]=="0")//顶目属地 { $("<selectid='no1'style='width:80px'onchange='show()'></select>").appendTo("#content");//在content中添加select元素 $("<optionvalue='-1'>请选择</option>").appendTo("#no1"); for(vari=0;i<len;i++)//把查询到数据循环添加到select中 { $("<optionvalue="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#no1"); } } else { $("<selectstype='width:80px'onchange='show()'></select>").appendTo("#content"); $("<optionvalue='-1'>请选择</option>").appendTo("#content>select:last"); for(vari=0;i<len;i++) { $("<optionvalue="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#content>select:last"); } $("#content>select:eq("+(k-1)+")>option[@value="+strArr[k]+"]").attr("selected","true");//设置选中 if(len==0)//最后一级,没东西就把它给删除 { $("#content>select:last").remove(); } } } }); }//for循环的结尾 }); functionshow() { varobj=event.srcElement;//取得当前事件的对象,也就是你点了哪个select,这里得到的就是那个对象 varcurrentObj=$(obj);//将JS对象转换成jQuery对象,这样才能使用其方法 vars1=$(obj).nextAll("select");//找到当前点击的后面的select对象 s1.each(function(i){ $(this).remove();//循环把它们删除 }); varvalue1=$(obj).val(); $.ajax({ url:'init.action', cache:false, data:{pid:value1}, type:'Get', dataType:'json', timeout:20000, error:function() { alert("出错啦"); }, success:function(json) { varlen=json.length; if(len!=0) { $("<selectstyle='width:80px'onchange='show()'></select>").appendTo("#content"); $("<optionvalue='-1'>请选择</option>").appendTo("#content>select:last"); for(vari=0;i<len;i++) { $("<optionvalue="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#content>select:last"); } } } }); } </script> </head> <body> <h1> 显示管理员信息 </h1> <tablewidth="50%"border="1"> <tr> <td>管理员编号</td><td><inputtype="text"value="${admin.adminId}"></td> </tr> <tr> <td>管理员帐号</td><td><inputtype="text"value="${admin.adminAccount}"></td> </tr> <tr> <td>管理员姓名</td><td><inputtype="text"value="${admin.adminName}"></td> </tr> <tr> <td>管理员密码</td><td><inputtype="text"value="${admin.password}"></td> </tr> <tr> <td>管理员属地</td><td><inputtype="text"value="${admin.channelid}"></td> </tr> </table> <divid="content" style="width:500px;border:1px;border-style:solid;background-color:lightblue;"> </div> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。