本文執行個體講述了ajax+jQuery實現級聯顯示地址的方法。分享給大家供大家參考。具體實現方法如下：
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <%@ 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,//原來是這樣,不然AJAX是一起發送的,加上這個的話,就保證這個請求有結果,才會發下一個請求 url:'init.action',//請求的URL cache: false, //不從緩衝中取資料 data:{pid:strArr[k]},//發送的參數 type:'Get',//請求類型 dataType:'json',//傳回型別是JSON timeout:20000,//逾時 error:function()//出錯處理 { alert("程式出錯!"); }, success:function(json)//成功處理 { var len=json.length;//得到查詢到數組長度 if(strArr[k]=="0")//頂目屬地 { $("<select id='no1' style='width:80px' onchange='show()'></select>").appendTo("#content");//在content中添加select元素 $("<option value='-1'>請選擇</option>").appendTo("#no1"); for(var i=0;i<len;i++)//把查詢到資料迴圈添加到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'>請選擇</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");//設定選中 if(len==0)//最後一級,沒東西就把它給刪除 { $("#content>select:last").remove(); } } } }); }//for迴圈的結尾 }); function show() { var obj=event.srcElement;//取得當前事件的對象,也就是你點了哪個select,這裡得到的就是那個對象 var currentObj=$(obj);//將JS對象轉換成jQuery對象,這樣才能使用其方法 var s1=$(obj).nextAll("select");//找到當前點擊的後面的select對象 s1.each(function(i){ $(this).remove();//迴圈把它們刪除 }); var value1=$(obj).val(); $.ajax({ url:'init.action', cache:false, data:{pid:value1}, type:'Get', dataType:'json', timeout:20000, error:function() { alert("出錯啦"); }, success:function(json) { var len=json.length; if(len!=0) { $("<select style='width:80px' onchange='show()'></select>").appendTo("#content"); $("<option value='-1'>請選擇</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>管理員編號</td><td><input type="text" value="${admin.adminId}"></td> </tr> <tr> <td>管理員帳號</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> |
希望本文所述對大家的jquery程式設計有所協助。
注：更多精彩教程請關注三聯圖文教程 頻道，
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
