相思资源网 Design By www.200059.com

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

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

随便截个图!
先贴数据库

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
复制代码 代码如下:
<div id="select" >
    <select name="category_1" id="category_1" onChange="change('category_1');">
        <option>请选择分类</option>
        <!-- {foreach from=$galleryCategory item=category} -->
            <option value="{$category.id}">{$category.category_name}</option>
        <!-- {/foreach} -->   
    </select>
</div>

$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 name=category_"+nownum+"     id=category_"+nownum+"  onChange=change('category_"+nownum+"'); >";
                html += "<option>请选择分类 </option>";
                var datas = eval(result);
                $.each(datas, function(i,val){     
                    html += "<option value='"+val.id+"' >"+val.category_name+"</option>";
                });  
                html += "</select>";

                //清空过时的选项
                $("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 大功告成!

标签:
js,jquery,无限极联动

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“使用js+jquery实现无限极联动”

暂无使用js+jquery实现无限极联动的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?