今天工作需要写树形的联动，于是写了个可扩展的无限极联动下拉选项

代码写的比较凌乱 先mark有空再整理

随便截个图！

先贴数据库

页面代码 用的SMARTY

复制代码 代码如下:

<div id="select" >

<select name="category_1" id="category_1" onChange="change('category_1');">

<option>请选择分类</option>

<>

<option value="{$category.id}">{$category.category_name}</option>

<>

</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实现无限极联动】相关文章：

★ 在JavaScript应用中使用RequireJS来实现延迟加载

★ javascript实现表格增删改操作实例详解

★ jquery读取xml文件实现省市县三级联动的方法

★ nodejs实现获取某宝商品分类

★ jQuery实现转动随机数抽奖效果的方法

★ javascript无刷新评论实现方法

★ jQuery实现不断闪烁文字的方法

★ Js和JQuery获取鼠标指针坐标的实现代码分享

★ 基于jquery实现下拉框美化特效

★ 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)