今天工作需要写树形的联动,于是写了个可扩展的无限极联动下拉选项
代码写的比较凌乱 先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 大功告成!
js,jquery,无限极联动
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 【雨果唱片】中国管弦乐《鹿回头》WAV
- APM亚流新世代《一起冒险》[FLAC/分轨][106.77MB]
- 崔健《飞狗》律冻文化[WAV+CUE][1.1G]
- 罗志祥《舞状元 (Explicit)》[320K/MP3][66.77MB]
- 尤雅.1997-幽雅精粹2CD【南方】【WAV+CUE】
- 张惠妹.2007-STAR(引进版)【EMI百代】【WAV+CUE】
- 群星.2008-LOVE情歌集VOL.8【正东】【WAV+CUE】
- 罗志祥《舞状元 (Explicit)》[FLAC/分轨][360.76MB]
- Tank《我不伟大,至少我能改变我。》[320K/MP3][160.41MB]
- Tank《我不伟大,至少我能改变我。》[FLAC/分轨][236.89MB]
- CD圣经推荐-夏韶声《谙2》SACD-ISO
- 钟镇涛-《百分百钟镇涛》首批限量版SACD-ISO
- 群星《继续微笑致敬许冠杰》[低速原抓WAV+CUE]
- 潘秀琼.2003-国语难忘金曲珍藏集【皇星全音】【WAV+CUE】
- 林东松.1997-2039玫瑰事件【宝丽金】【WAV+CUE】