使用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

複製程式碼

複製程式碼

程式碼🎜>

   
   
       
                 
   

$galleryCategory 去資料的PHP代碼為

$galleryCategory 去資料的PHP代碼為複製程式碼

程式碼如下:

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

用的原生態碼還是比較容易理解的
然後就是關鍵的JS程式碼了function change(val) {

複製程式碼 程式碼如下:

var str = val; //select的id
    var num; //目前級數
    var id; // 分類id
    num = str.substrnum = str.substr. ;
    //alert(num);
    var nownum = parseInt(num) 1; // 將字串轉換為數字
    id = $("#" str "").val();
    var r = /^[1-9] [0-9]*]*$/;　//正整數
    if (!r.test(id)) {
     選項
        $("select").each(function(index){
             );
            }
        })

        return false;
    }
    var url = 'gallery.php?act=category&pid=' id "POST",
        cache: false,
        url: url,
            success: function(result){
            if ( result != 0) {   
                var html = "" val .category_name "";
                });  
                  //已清空過時的選項
                $("select").each (function(index){
                   if(index 1 > num) {
   ();
                    }
             $("#select" ).append(html);
            } select").each(function(index){
                   if(index 1 > num) {
                        $(this).remove();
               })　　　　　　　}

       🎜>}


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