jquery+php無限極聯動菜單一實例

今天工作需要 要寫樹形的聯動，於是寫了個可擴充的無限極聯動下拉選項

代碼寫的比較淩亂 先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

代碼如下	複製代碼
<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 大功告成！