使用js+jquery實現(xiàn)無限極聯(lián)動
更新時間：2013年05月23日 12:02:37 作者：
本篇文章是對可擴展的無限極聯(lián)動下拉選項的實例進行了分析介紹，需要的朋友參考下
今天工作需要寫樹形的聯(lián)動，于是寫了個可擴展的無限極聯(lián)動下拉選項
代碼寫的比較凌亂 先mark有空再整理
隨便截個圖！
先貼數(shù)據(jù)庫
| 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 去數(shù)據(jù)的PHP代碼為
復制代碼 代碼如下:
$sql = " select * from yl_gallery_category where pid = 0";
$galleryCategory = $db->query($sql);
$smarty->assign("galleryCategory",$galleryCategory);
用的原生態(tài)代碼 還是比較容易理解的
然后就是關鍵的 JS代碼了function change(val) {
復制代碼 代碼如下:
var str = val; //select的id
var num; //當前級數(shù)
var id; // 分類id
num = str.substr(9,10);
//alert(num);
var nownum = parseInt(num)+1; // 將字符串轉換為數(shù)字
id = $("#"+str+"").val();
var r = /^[1-9]+[0-9]*]*$/; //正整數(shù)
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 取數(shù)據(jù)的PHP代碼
復制代碼 代碼如下:
$sql = " select * from yl_gallery_category where pid = " .$pid;
$res = $db->query($sql);
if (empty($res)) {
$res = 0;
}
echo json_encode($res);
OK 大功告成！
相關文章
jQuery效果 slideToggle() 方法(在隱藏和顯示之間切換)
slideToggle() 方法通過使用滑動效果（高度變化）來切換元素的可見狀態(tài)。2011-06-06
jquery常用技巧及常用方法列表集合，學習jquery的朋友可以收藏下。方便查找學習。2011-04-04
這篇文章主要介紹了jQuery實現(xiàn)的導航下拉菜單效果,涉及jQuery響應鼠標事件動態(tài)操作頁面元素的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-07-07
jQuery實現(xiàn)自定義checkbox和radio樣式
這篇文章主要介紹了jQuery實現(xiàn)自定義checkbox和radio樣式的相關資料,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了JQuery包裹DOM節(jié)點的方法,實例分析了wrap與wrapAll方法實現(xiàn)包裹DOM節(jié)點的技巧與相關注意事項,需要的朋友可以參考下2015-06-06
下面小編就為大家?guī)硪黄獁ebpack中引用jquery的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
Ajax分頁插件Pagination從前臺jQuery到后端java總結
這篇文章主要從前臺jQuery到后java端總結了Ajax分頁插件Pagination的使用方法和技巧，感興趣的小伙伴們可以參考一下2016-07-07
在Web開發(fā)中,表單提交是一個常見的操作,通過表單提交用戶可以向服務器發(fā)送數(shù)據(jù),jQuery是一個流行的JavaScript庫,可以簡化處理JavaScript的操作,包括表單提交,在本篇博客中,我們將介紹如何使用jQuery來實現(xiàn)表單提交操作,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了jquery中checkbox使用方法簡單實例演示，感興趣的小伙伴們可以參考一下2015-11-11
使用jquery的朋友對其中的on方法并不陌生吧，下面為大家介紹下此方法的具體使用，感興趣的朋友可以參考下2013-12-12