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

今天工作需要写树形的联动，于是写了个可扩展的无限极联动下拉选项

代码写的比较凌乱 先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

请选择分类

{$category.category_name}

$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 = "";

html += "请选择分类";

var datas = eval(result);

$.each(datas, function(i,val){

html += ""+val.category_name+"";

});

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 大功告成！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！