ajax+jQuery實(shí)現(xiàn)級(jí)聯(lián)顯示地址的方法

2024-09-01 08:33:30

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了ajax+jQuery實(shí)現(xiàn)級(jí)聯(lián)顯示地址的方法,涉及jQuery操作Ajax實(shí)現(xiàn)級(jí)聯(lián)顯示的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(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;//得到查詢(xún)到數(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++)//把查詢(xún)到數(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>