使用jquery实现四级级联（java）
大侠们帮忙。其实问题不复杂。就是俺不会啊！使用jquery实现级联查询。选择第一级的时候，二三四级相对应的出来！所以数据都是从数据库一张表里读出来的！第一级ID为10、2...
大侠们帮忙。其实问题不复杂。就是俺不会啊！使用jquery实现级联查询。选择第一级的时候，二三四级相对应的出来！所以数据都是从数据库一张表里读出来的！第一级ID为10、20、30、40，第二级为1010、1020、1030、2010、2020、2030、……第三四级依次类推。这个我会查询，就是不知道用jquery如何在onchang事件的时候怎么写，怎么发送请求，怎么接收返回值，求高人帮忙，解决问题了俺再送一百分加一万个感谢！
展开
4个回答
展开全部
拼了！为了这200分。我刚搜索了一下，居然没找到四级联动。
我准备今天花一小时为你写一个无级联动！！！就是随便你增加多少，都不要改程序
------------------------------------------------------
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无极联动啊，花了我一个小时</title>
<script src="这里是 jQuery.js，你自己加载" type="text/javascript"></script>
</head>
<body>
<div id="form">
一级<select><option value="">请选择</option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select>
二级<select></select>
三级<select></select>
四级<select></select>
</div>
<script type="text/javascript">
var url = 'data.php';
var defaultOption = '<option>请选择</option>';
$('#form select').each(function(){
//$(this).prepend('<option>请选择</option>');
}).change(function(){
var $opt = $(this);
var index = $('#form select').index(this);
if( $(this).val() == '' )
return ;
$.get( url ,{opt:$(this).val(),index:index},function(data){
var showData = eval('('+data+')');
$opt.nextAll('select').add(this).each(function(i){
var html = '';
var value = ''
for( var j = 0; j < showData.length ; j++ ){
if( typeof( showData[i] ) == 'undefined' || typeof( showData[i][j]) == 'undefined' )
continue;
html += '<option vlaue="'+ showData[i][j] + '">'+showData[i][j]+ '</option>';
}
$(this).html( html );
});
});
});
</script>
</body>
</html>
------------------------------------------
这是测试数据，实际情况，你是从数据库调用的，我写了一个demo
-----------------------------------------
data.php
<?php
$opt = $_GET['opt'];
$index = $_GET['index'];
if( $index = '1' ){
if( $opt == 10 )
exit('Array([1021,1022,1032,1024],[1031,1032,1033,1034],[1041,1042,1043,1044])');
elseif( $opt == 20 )
exit('Array([2021,2022,2032,1024],[2031,2032,2033,1034],[2041,2042,2043,2044])');
elseif( $opt == 30 )
exit('Array([3021,3022,3032,3024],[3031,3032,3033,3034],[3041,1042,3043,3044])');
}elseif( $index = '2' ){
// 这里的数据是一样的格式。。。。
}if( $opt = '3' ){
//...
}
?>
-------------------------------
我只做了第几级的数据哦，这是无极联动，你直接增加数据就可以了，不需要修改程序。
累死我了，吃饭去了。
有问题留言。
我准备今天花一小时为你写一个无级联动！！！就是随便你增加多少，都不要改程序
------------------------------------------------------
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无极联动啊，花了我一个小时</title>
<script src="这里是 jQuery.js，你自己加载" type="text/javascript"></script>
</head>
<body>
<div id="form">
一级<select><option value="">请选择</option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select>
二级<select></select>
三级<select></select>
四级<select></select>
</div>
<script type="text/javascript">
var url = 'data.php';
var defaultOption = '<option>请选择</option>';
$('#form select').each(function(){
//$(this).prepend('<option>请选择</option>');
}).change(function(){
var $opt = $(this);
var index = $('#form select').index(this);
if( $(this).val() == '' )
return ;
$.get( url ,{opt:$(this).val(),index:index},function(data){
var showData = eval('('+data+')');
$opt.nextAll('select').add(this).each(function(i){
var html = '';
var value = ''
for( var j = 0; j < showData.length ; j++ ){
if( typeof( showData[i] ) == 'undefined' || typeof( showData[i][j]) == 'undefined' )
continue;
html += '<option vlaue="'+ showData[i][j] + '">'+showData[i][j]+ '</option>';
}
$(this).html( html );
});
});
});
</script>
</body>
</html>
------------------------------------------
这是测试数据，实际情况，你是从数据库调用的，我写了一个demo
-----------------------------------------
data.php
<?php
$opt = $_GET['opt'];
$index = $_GET['index'];
if( $index = '1' ){
if( $opt == 10 )
exit('Array([1021,1022,1032,1024],[1031,1032,1033,1034],[1041,1042,1043,1044])');
elseif( $opt == 20 )
exit('Array([2021,2022,2032,1024],[2031,2032,2033,1034],[2041,2042,2043,2044])');
elseif( $opt == 30 )
exit('Array([3021,3022,3032,3024],[3031,3032,3033,3034],[3041,1042,3043,3044])');
}elseif( $index = '2' ){
// 这里的数据是一样的格式。。。。
}if( $opt = '3' ){
//...
}
?>
-------------------------------
我只做了第几级的数据哦，这是无极联动，你直接增加数据就可以了，不需要修改程序。
累死我了，吃饭去了。
有问题留言。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
和你取第一级的时候一样，只不过每次多传一个参数。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
其实级联，会一个级联就行啦。。其他的不都是一摸一样的嘛！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
