一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery+php无限极联动菜单实例

时间:2013-05-30 编辑:简简单单 来源:一聚教程网

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

代码写的比较凌乱 先mark  有空再整理

操蛋!

公司连QQ都不能上 随便截个图!

先贴数据库

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

 代码如下 复制代码
select" >
   

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

热门栏目