脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → ajax+jQuery级联显示地址

ajax+jQuery实现级联显示地址的方法

 更新时间：2015年05月06日 17:21:03   作者：lrwins  
这篇文章主要介绍了ajax+jQuery实现级联显示地址的方法,涉及jQuery操作Ajax实现级联显示的技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了ajax+jQuery实现级联显示地址的方法。分享给大家供大家参考。具体实现方法如下：

<%@ 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JQuery中使文本框获得焦点的方法实例分析

    JQuery中使文本框获得焦点的方法实例分析

    这篇文章主要介绍了JQuery中使文本框获得焦点的方法,实例分析了jQuery针对文本框获得焦点的技巧,需要的朋友可以参考下
    2015-02-02
  • 页面刷新时记住滚动条的位置jquery代码

    页面刷新时记住滚动条的位置jquery代码

    这篇文章主要介绍了点击按钮页面刷新的时候 记住滚动条的位置,需要的朋友可以参考下
    2014-06-06
  • jquery 新浪网易的评论块制作

    jquery 新浪网易的评论块制作

    新浪网易的评论块制作 因为 textarea里面不能放图片，所以和新浪的做法一样，选用iframe放内容，然后隐藏一个 textarea用于提交。
    2010-07-07
  • jquery实现左右无缝轮播图

    jquery实现左右无缝轮播图

    这篇文章主要为大家详细介绍了基于jquery实现左右无缝轮播图的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • jQuery 监控键盘一段时间没输入

    jQuery 监控键盘一段时间没输入

    当一个文本框中，里面的内容1秒钟无变化，则表示用户1秒钟内无输入，说明用户是已经输入完成，再等待返回数据了。那么jQuery如何实现判断1秒内无输入呢，一起通过本文学习吧
    2016-04-04
  • 如何使用Jquery动态生成二级选项列表

    如何使用Jquery动态生成二级选项列表

    这篇文章主要介绍了如何使用Jquery动态生成二级选项列表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • jQuery创建平滑的页面滚动(顶部或底部)

    jQuery创建平滑的页面滚动(顶部或底部)

    如何创建一个平滑的滚动效果是本文的目的使用jQuery让您可以滚动到你的网页的顶部或底部,相当不错的一个效果，感兴趣的你可不要错过了哈
    2013-02-02
  • 推荐25个超炫的jQuery网格插件

    推荐25个超炫的jQuery网格插件

    本文给大家推荐了25个jQuery网格特效插件，在此集合中，我们将展示一些非常酷的jQuery插件和资源在网格布局设计，提高了数据的介绍。一些实用的插件，一定会提供一个美好的用户体验。同时，一些精致的资源，这将有助于布局精美的数据范围。
    2014-11-11
  • jQuery中slidedown与slideup方法用法示例

    jQuery中slidedown与slideup方法用法示例

    这篇文章主要介绍了jQuery中slidedown与slideup方法用法,结合实例形式分析了jQuery基于slidedown与slideup方法实现页面元素展开与折叠的实现技巧,需要的朋友可以参考下
    2016-09-09
  • 基于jQuery实现的Ajax 验证用户名唯一性实例代码

    基于jQuery实现的Ajax 验证用户名唯一性实例代码

    本文分为jsp代码和后台代码给大家介绍了基于jQuery实现的Ajax 验证用户名唯一性，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-06-06

最新评论