本文實(shí)例講述了ajax+jQuery實(shí)現(xiàn)級(jí)聯(lián)顯示地址的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"contentType="text/html; charset=utf-8"%><html><head> <title>初始化HELLO</title> <script type="text/javascript" src="../../js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var str1='${str}'; var strArr=str1.split(","); var k; for(k=0;k<strArr.length;k++) { $.ajax({ async:false,//原來(lái)是這樣,不然AJAX是一起發(fā)送的,加上這個(gè)的話,就保證這個(gè)請(qǐng)求有結(jié)果,才會(huì)發(fā)下一個(gè)請(qǐng)求 url:'init.action',//請(qǐng)求的URL cache: false, //不從緩存中取數(shù)據(jù) data:{pid:strArr[k]},//發(fā)送的參數(shù) type:'Get',//請(qǐng)求類(lèi)型 dataType:'json',//返回類(lèi)型是JSON timeout:20000,//超時(shí) error:function()//出錯(cuò)處理 { alert("程序出錯(cuò)!"); }, success:function(json)//成功處理 { var len=json.length;//得到查詢到數(shù)組長(zhǎng)度 if(strArr[k]=="0")//頂目屬地 { $("<select id='no1' style='width:80px' onchange='show()'></select>").appendTo("#content");//在content中添加select元素 $("<option value='-1'>請(qǐng)選擇</option>").appendTo("#no1"); for(var i=0;i<len;i++)//把查詢到數(shù)據(jù)循環(huán)添加到select中 { $("<option value="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#no1"); } } else { $("<select stype='width:80px' onchange='show()'></select>").appendTo("#content"); $("<option value='-1'>請(qǐng)選擇</option>").appendTo("#content>select:last"); for(var i=0;i<len;i++) { $("<option value="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#content>select:last"); } $("#content>select:eq("+(k-1)+")>option[@value="+strArr[k]+"]").attr("selected","true");//設(shè)置選中 if(len==0)//最后一級(jí),沒(méi)東西就把它給刪除 { $("#content>select:last").remove(); } } } }); }//for循環(huán)的結(jié)尾 }); function show() { var obj=event.srcElement;//取得當(dāng)前事件的對(duì)象,也就是你點(diǎn)了哪個(gè)select,這里得到的就是那個(gè)對(duì)象 var currentObj=$(obj);//將JS對(duì)象轉(zhuǎn)換成jQuery對(duì)象,這樣才能使用其方法 var s1=$(obj).nextAll("select");//找到當(dāng)前點(diǎn)擊的后面的select對(duì)象 s1.each(function(i){ $(this).remove();//循環(huán)把它們刪除 }); var value1=$(obj).val(); $.ajax({ url:'init.action', cache:false, data:{pid:value1}, type:'Get', dataType:'json', timeout:20000, error:function() { alert("出錯(cuò)啦"); }, success:function(json) { var len=json.length; if(len!=0) { $("<select style='width:80px' onchange='show()'></select>").appendTo("#content"); $("<option value='-1'>請(qǐng)選擇</option>").appendTo("#content>select:last"); for(var i=0;i<len;i++) { $("<option value="+json[i].channelId+">"+json[i].channelName+"</option>").appendTo("#content>select:last"); } } } }); } </script></head><body> <h1> 顯示管理員信息 </h1><table width="50%" border="1"><tr><td>管理員編號(hào)</td><td><input type="text" value="${admin.adminId}"></td></tr><tr><td>管理員帳號(hào)</td><td><input type="text" value="${admin.adminAccount}"> </td></tr><tr><td>管理員姓名</td><td><input type="text" value="${admin.adminName}"> </td></tr><tr><td>管理員密碼</td><td><input type="text" value="${admin.password}"> </td></tr><tr><td>管理員屬地</td><td><input type="text" value="${admin.channelid}"> </td></tr></table> <div id="content" style="width: 500px; border: 1px; border-style: solid; background-color: lightblue;"> </div></body></html>希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
