DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 使用js+jquery實現無限極聯動
使用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
. 代碼如下:
<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 大功告成!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved