首页 / 脚本样式 / JavaScript / 使用js+jquery实现无限极联动

今天工作需要写树形的联动，于是写了个可扩展的无限极联动下拉选项
代码写的比较凌乱 先mark有空再整理

随便截个图！
先贴数据库

页面代码 用的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 大功告成！