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

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

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

2019-03-09T14:13:33.png
2019-03-09T14:13:53.png
页面代码 用的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>
HTML

$galleryCategory 去数据的PHP代码为

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

用的原生态代码 还是比较容易理解的
然后就是关键的 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
    });

}
JavaScript

AJAX 取数据的PHP代码

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

发表评论

您的电子邮箱地址不会被公开。