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

更新時間：2015年05月06日 17:21:03 作者：lrwins

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

本文實例講述了ajax+jQuery實現(xiàn)級聯(lián)顯示地址的方法。分享給大家供大家參考。具體實現(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,//原來是這樣,不然AJAX是一起發(fā)送的,加上這個的話,就保證這個請求有結果,才會發(fā)下一個請求
   url:'init.action',//請求的URL
   cache: false, //不從緩存中取數(shù)據(jù)
   data:{pid:strArr[k]},//發(fā)送的參數(shù)
   type:'Get',//請求類型
   dataType:'json',//返回類型是JSON
   timeout:20000,//超時
   error:function()//出錯處理
   {
   alert("程序出錯!");
   },
   success:function(json)//成功處理
   {
    var len=json.length;//得到查詢到數(shù)組長度
   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++)//把查詢到數(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'>請選擇</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循環(huán)的結尾
 });
 function show()
 {
 var obj=event.srcElement;//取得當前事件的對象,也就是你點了哪個select,這里得到的就是那個對象
 var currentObj=$(obj);//將JS對象轉(zhuǎn)換成jQuery對象,這樣才能使用其方法
 var s1=$(obj).nextAll("select");//找到當前點擊的后面的select對象
 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("出錯啦");
 },
 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程序設計有所幫助。

您可能感興趣的文章: