您的位置:首页 > Web前端 > JavaScript

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

2017-04-13 23:54 639 查看
之前做的一段每行解析,重要的是带来的思路原理

<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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐