书籍：超实用的javascript代码段：下拉框二级联动效果（解析笔记）附带后台循环查询多级分类下的原理

来源：互联网发布：打开算法之门 pdf 编辑：程序博客网时间：2024/05/04 14:24

之前做的一段每行解析，重要的是带来的思路原理

<h2>下拉聯動</h2><p>省<select id="provinces"></select></p><p>市<select id="citys"></select></p>

        var linkDatas = {            provinces:[                {                    "code":"0",                    "name":"请选择"                },                {                    "code":"1",                    "name":"北京"                },                {                    "code":"2",                    "name":"天津"                },                {                    "code":"3",                    "name":"河北"                },                {                    "code":"4",                    "name":"湖北"                },                {                    "code":"5",                    "name":"广东"                },                {                    "code":"6",                    "name":"其他"                }            ],            citys:{                0:[                    "请选择"                ],                1:[                    "朝阳区",                    "海淀区",                    "东城区",                    "西城区",                    "房山区",                    "其他"                ],                2:[                    "天津"                ],                3:[                    "沧州",                    "石家庄",                    "秦皇岛",                    "其他"                ],                4:[                    "武汉市",                    "宜昌市",                    "襄樊市",                    "其他"                ],                5:[                    "广州市",                    "深圳市",                    "汕头市",                    "佛山市",                    "珠海市",                    "其他"                ],                6:[                    "其他"                ]            }        };        function addOptions(target, optons){//這個是操作dom的添加,函數字面量            var _option = null,               //這叫var多個                    ol = optons.length,//獲取傳來的長度                    i = 0,        //for提出來                    _v = "",    //初始化                    _t = "";            for(; i < ol ; i++ ){//還可以這樣寫                _v = optons[i].value;                _t = optons[i].text;                _option = document.createElement("OPTION")//操作dom                _option.value = _v;                _option.text = _t;                target.options.add(_option);//options數組裡面添加的內容，造作dom            }        }        function linkage(parents, childs){//联动效果，业务处理---参数（一级菜单，二级菜单）            var  _linkDatas = linkDatas,//地址庫//這叫var多個                    _parents = _linkDatas.provinces,                    _childs = _linkDatas.citys,                    _initCity = _childs[0],                    _p = [];            /*初始化数据*/            for(var i in _parents){//省  //遍历数组内的元素                _p.push({        //尾數追加所有省份信息                    "text" : _parents[i].name,                    "value" : _parents[i].code                });            }            addOptions(parents, _p);//添加选项     //調用操作dom函數，targrt/數據            addOptions(childs,[{//城市                "value":_initCity,                "text":_initCity            }]);            parents.onchange = function(){//联动事件绑定及具体业务处理            alert(_childs[this.value]);//this是省帶過來的，value是省的code，這樣可以追查到市的全部值                var __childs = _childs[this.value],                        __childsLen = __childs.length,                        l = 0,                        __p = [];                childs.innerHTML = "";                for(; l < __childsLen ; l++){                    __p.push({                        "value" : __childs[l],                        "text" : __childs[l]                    });                }                addOptions(childs, __p);            }        }        linkage(//绑定一级菜单与二级菜单                document.getElementById("provinces"),                document.getElementById("citys"));

后台查询，递归查询，通过查询第一级后，再通过第一级为条件一直查，例子来源于商品分类中商品标签下的不同子标签

    function goods_biaoqian(){        $where = array('pid'=>0);        $data= $this->gallery_model->goods_biaoqian($where);        //print_r($data);        $biaoqian_v = array();//开数组存放        foreach ($data as $key => $value) {         $biaoqian_name=$value['biaoqian_name'];         $biaoqian_id= $value['biaoqian_id'];         $where = array('pid'=>$biaoqian_id);//通过上一级的级数为条件查下一级         $data= $this->gallery_model->goods_biaoqian($where);         $biaoqian_v[$biaoqian_name]=$data;        }        return $biaoqian_v;    }

0 0