使用js+jquery實(shí)現(xiàn)無(wú)限極聯(lián)動(dòng)

更新時(shí)間：2013年05月23日 12:02:37 作者：

本篇文章是對(duì)可擴(kuò)展的無(wú)限極聯(lián)動(dòng)下拉選項(xiàng)的實(shí)例進(jìn)行了分析介紹，需要的朋友參考下

今天工作需要寫(xiě)樹(shù)形的聯(lián)動(dòng)，于是寫(xiě)了個(gè)可擴(kuò)展的無(wú)限極聯(lián)動(dòng)下拉選項(xiàng)
代碼寫(xiě)的比較凌亂先mark有空再整理

隨便截個(gè)圖！
先貼數(shù)據(jù)庫(kù)

id	category_name 分類(lèi)名	pid 父分類(lèi)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

頁(yè)面代碼用的SMARTY

復(fù)制代碼代碼如下:

<div id="select" >
    <select name="category_1" id="category_1" onChange="change('category_1');">
        <option>請(qǐng)選擇分類(lèi)</option>
        <!-- {foreach from=$galleryCategory item=category} -->
            <option value="{$category.id}">{$category.category_name}</option>
        <!-- {/foreach} -->    
    </select>
</div>

$galleryCategory 去數(shù)據(jù)的PHP代碼為

復(fù)制代碼代碼如下:

$sql = " select * from yl_gallery_category where pid = 0"; 
$galleryCategory = $db->query($sql); 
$smarty->assign("galleryCategory",$galleryCategory); 

用的原生態(tài)代碼還是比較容易理解的
然后就是關(guān)鍵的 JS代碼了function change(val) {

復(fù)制代碼代碼如下:

var str = val; //select的id
    var num; //當(dāng)前級(jí)數(shù)
    var id; // 分類(lèi)id
    num = str.substr(9,10);
    //alert(num);
    var nownum = parseInt(num)+1; // 將字符串轉(zhuǎn)換為數(shù)字
    id = $("#"+str+"").val();
    var r = /^[1-9]+[0-9]*]*$/;　//正整數(shù)
    if (!r.test(id)) {
        //清空過(guò)時(shí)的選項(xiàng)
        $("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>請(qǐng)選擇分類(lèi) </option>";
                var datas = eval(result);
                $.each(datas, function(i,val){      
                    html += "<option value='"+val.id+"' >"+val.category_name+"</option>";
                });   
                html += "</select>";

                //清空過(guò)時(shí)的選項(xiàng)
                $("select").each(function(index){
                    if(index+1 > num) {
                        $(this).remove();
                    }
                })

                $("#select").append(html);
            } else {
　　　　　　　　　　//清空過(guò)時(shí)的選項(xiàng)
                $("select").each(function(index){
                    if(index+1 > num) {
                        $(this).remove();
                    }
                })　　　　　　　}

        },
        error: false
    });

}

AJAX 取數(shù)據(jù)的PHP代碼

復(fù)制代碼代碼如下:

$sql = " select * from yl_gallery_category where pid = " .$pid; 
    $res = $db->query($sql); 
    if (empty($res)) { 
        $res = 0; 
    } 
    echo json_encode($res); 

OK 大功告成！

您可能感興趣的文章: