ajax+jQuery實現級聯顯示地址的方法

最後更新：2015-05-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　本文執行個體講述了ajax+jQuery實現級聯顯示地址的方法。分享給大家供大家參考。具體實現方法如下：

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>

$(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>

<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程式設計有所協助。

注：更多精彩教程請關注幫客之家圖文教程頻道，

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

ajax+jQuery實現級聯顯示地址的方法

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support