当前位置:Gxlcms > JavaScript > 使用js+jquery实现无限极联动_jquery

使用js+jquery实现无限极联动_jquery

时间:2021-07-01 10:21:17 帮助过:46人阅读

今天工作需要写树形的联动,于是写了个可扩展的无限极联动下拉选项
代码写的比较凌乱 先mark有空再整理



随便截个图!
先贴数据库

id category_name 分类名 pid 父分类id orders 排序
1 22223331 0 1
2 2222111 1 1
12 44444 11 0
5 2222 1 1
6 2222 1 1
11 333 2 0
13 555555 12 0

页面代码 用的SMARTY

代码如下:





$galleryCategory 去数据的PHP代码为
代码如下:

$sql = " select * from yl_gallery_category where pid = 0";
$galleryCategory = $db->query($sql);
$smarty->assign("galleryCategory",$galleryCategory);

用的原生态代码 还是比较容易理解的
然后就是关键的 JS代码了function change(val) {
代码如下:

var str = val; //select的id
var num; //当前级数
var id; // 分类id
num = str.substr(9,10);
//alert(num);
var nownum = parseInt(num)+1; // 将字符串转换为数字
id = $("#"+str+"").val();
var r = /^[1-9]+[0-9]*]*$/; //正整数
if (!r.test(id)) {
//清空过时的选项
$("select").each(function(index){
if(index+1 > num) {
$(this).remove();
}
})

return false;
}
var url = 'gallery.php?act=category&pid='+id;
$.ajax({
type: "POST",
cache: false,
url: url,
datatype : 'json',
timeout : 3000,
success: function(result){
if ( result != 0) {
var html = "";

//清空过时的选项
$("select").each(function(index){
if(index+1 > num) {
$(this).remove();
}
})

$("#select").append(html);
} else {
          //清空过时的选项
$("select").each(function(index){
if(index+1 > num) {
$(this).remove();
}
})       }

},
error: false
});

}

AJAX 取数据的PHP代码
代码如下:

$sql = " select * from yl_gallery_category where pid = " .$pid;
$res = $db->query($sql);
if (empty($res)) {
$res = 0;
}
echo json_encode($res);

OK 大功告成!

人气教程排行