ajax+jQuery实现级联显示地址的方法
本文实例讲述了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操作一个列表,根据类别选出学校,点击学校出现院系,点击院系出现专业,然后链接至专业申请页面. 具体功能代码如下: $("li.university").click(function(){ var id = $(this).attr("rel"); $.get("data.aspx?type=u&a
-
基于jQuery+JSON的省市二三级联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. HTML 首先在head中载入jquery库和cityselect插件. <script type="text/javascript" src="js/jquery.js"></script> <script ty
-
基于jquery的无限级联下拉框js插件
灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,造成理解起来十分困难,后面会做些解释. 插件一:适合在不与服务器进行AJAX交互情况使用,需预先将所有下拉
-
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: 复制代码 代码如下: var mail={ //初始化 init:{ //初始化数据 initdata:{ did:'', ttitle:'', sendpassword:'', description:'' }, //初始化事件 initevent:{ DataEvent:function(){ $("#did").unbind("change");//获取一级
-
jQuery+ajax实现无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 下面是做的一个前台用JQUERY,AJAX调用后台方法做的无刷新级联菜单 CasMenu.aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC &quo
-
jquery读取xml文件实现省市县三级联动的方法
本文实例讲述了jquery读取xml文件实现省市县三级联动的方法.分享给大家供大家参考.具体如下: 页面代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'city.jsp' starting p
-
jQuery实现的多选框多级联动插件
jQuery 实现的多选框联动插件 复制代码 代码如下: // 使用:$(_event_src_).autoSelect(_reload_, reload_url); // 前台用get方法传输<select>标签的属性"name"和选中<option>的属性"value" // 后台用json格式传输数据 // 格式: { value:<option>的属性"value", text:<option&g
-
jQuery 中国省市两级联动选择附图
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>省市两级联动选择&l
-
基于JQuery实现的Select级联
复制代码 代码如下: $(document).ready(function(){ $("#precinct").change(function(){ $("#ptype").val("");//重置所有 $("#stype").html(""); $("#stype").append("<option value=\"\">--请选择--<
-
JQuery实现级联下拉框效果实例讲解
用JQuery和select来实现汽车厂商和汽车类型的联动,参考过程如下 效果图: 逻辑分析图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
-
jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap"> <div class="nice-select" name="nice-select&
-
JQuery异步加载无限下拉框级联功能实现示例
复制代码 代码如下: <pre code_snippet_id="193059" snippet_file_name="blog_20140218_1_1038704" name="code" class="javascript">/* JQuery异步加载无限极下拉框级联功能 zjy */ (function ($) { $.ajaxSetup({ async: false }); var url = "
-
jquery调取json数据实现省市级联的方法
本文实例讲述了jquery调取json数据实现省市级联的方法.分享给大家供大家参考.具体如下: 使用jQuery mobile作为创建移动web的框架,需要实现省市级联的功能,具体代码如下(还需要优化的地方): Html代码: jQuery mobile中,有input list属性,下方紧跟<datalist >标签,中间包含的<option value="XXXX"></option>即为选项,相当于这个input为有下拉列表的功能,当然,in
-
jquery实现的省市区三级联动
省市级联动,附使用示例和数据表数据 有部分数据精确到乡镇一级!!! Git 地址:http://git.oschina.net/upliu/province-city-district 演示代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>省市区三级联动</title> </head>