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

前端技术 2023/09/10 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/26504

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案