国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

使用js+jquery實現無限極聯動

2019-11-20 22:41:22
字體:
來源:轉載
供稿:網友

今天工作需要寫樹形的聯動,于是寫了個可擴展的無限極聯動下拉選項
代碼寫的比較凌亂 先mark有空再整理



隨便截個圖!
先貼數據庫

idcategory_name 分類名pid 父分類idorders 排序
12222333101
2222211111
1244444110
5222211
6222211
1133320
13555555120

頁面代碼 用的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 大功告成!

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 黑山县| 鲁山县| 开封县| 辽中县| 五家渠市| 突泉县| 栾川县| 嫩江县| 平度市| 临泽县| 金寨县| 高雄县| 临湘市| 凤庆县| 武川县| 二连浩特市| 新平| 清水河县| 大港区| 永济市| 武威市| 隆昌县| 青州市| 宁远县| 柳河县| 临潭县| 文安县| 湘乡市| 伽师县| 绍兴市| 内江市| 岳池县| 昭觉县| 宁陕县| 蓝田县| 汨罗市| 溆浦县| 沙湾县| 称多县| 中西区| 清涧县|