Posted in Javascript onMay 06, 2015
本文实例讲述了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程序设计有所帮助。
ajax+jQuery实现级联显示地址的方法
- Author -
lrwins声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@