BootStrap无限级分类(无限极分类封装版)


Posted in Javascript onAugust 26, 2016

HTML部分

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多级联动封装</title>
<link href="./css/bootstrap.css" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="./duoji.js"></script>
</head>
<body>
<div class="row" style="margin:100px auto;">
<div class="col-md-12" id="box1"></div> 
</div>
<div class="row" style="margin:100px auto;">
<div class="col-md-12" id="box2"></div> 
</div>
<script>
//容器名,name名(新生成的class名)
$.select('box1','area1');
$.select('box2','area2');
</script>
</body>
</html>

duoji.js 代码

(function ($) {
$.select=function(box,addInputClass){
var i=new select;
return i.init(box,addInputClass)
}
//声明多级联动 方法类
var select = new Function();
select.prototype={
//定义类属性
init:function(box,addInputClass){
this.boxName=box;
this.box=$('#'+box); //需要添加元素的容器
this.eleClass=addInputClass;//每个事件的定位class
this.first();//新建一个select获取 
},
first:function(){
//声明外部变量
var boxName=this.boxName;
var eleClass= this.eleClass;
var box=this.box;
var obj=this;
$.get("http://127.0.0.1:83/areas", {id:'0'},
function(data){
var option="<option value=''>请选择</option>";
var list=data.data;
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
$('<div class="col-md-2 pl0"><select name="'+eleClass+'[]" num="0" pnode="'+boxName+'" cname="'+eleClass+'" class="form-control input-sm '+eleClass+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});
},'jsonp');
},
//change事件
change:function(event){
//声明
var boxName=$(event).attr('pnode'); //获取触发事件者的pnode 
var className=$(event).attr('cname');//获取触发事件者的cname
var box =$("#"+boxName); //获取所有插入盒子的对象
var eleClass=$("."+className); //获取所有Class所在元素组
var num=eleClass.index($(event))+1; //获取num的值
var id=$(event).val(); //获取ajax发送id的头
var obj=this; //代表这个方法
//清除 后续添加的新的元素
eleClass.each(function(){
//这里的this 代表eleClass 遍历时的单个对象
//console.log($(this).attr('num'));
//console.log($().attr('num'));
if($(this).attr('num')>$(event).attr('num')){
$(this).parent().remove();
}
});
/*
console.log(boxName);
console.log(className);
console.log($(event));
console.log($(event).val());
*/
//循环ajax方法
$.ajax({
type: "get",
dataType:"jsonp",
url: "http://127.0.0.1:83/areas",
data: {id:id},
sync: false,//设置为同步
success: function(data){
//console.log(data);
var list =data.data
if(data.state==='1'){
var option="<option value=''>请选择</option>";
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
$('<div class="col-md-2 pl0"><select name="'+className+'[]" num="'+num+'" pnode="'+boxName+'" cname="'+className+'" class="form-control input-sm '+className+'" >'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change(this)});
}
}
});
},
//查询当前盒子中的信息
log:function(){
var boxName=$(event).attr('pnode'); //获取触发事件者的pnode 
var className=$(event).attr('cname');//获取触发事件者的cname
var box =$("#"+boxName); //获取所有插入盒子的对象
var eleClass=$("."+className); //获取所有Class所在元素组
console.log("容器名:"+boxName+"\n 触发的class名:"+className);
},
//第一个select框获取信息
getFirstElement:function(){
var main=$('#'+this.main);
$.get("http://127.0.0.1:83/areas", {id:'0'},
function(data){
var option="<option value=''>请选择</option>";
var list=data.data;
for(var key in list){
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
main.html(option);
},'jsonp');
}
}
})(jQuery)

后端提供的数据类型:json

如果有数据:state=1

例子:

data:{
110000:{id: "110000", areaname: "北京", pid: "0", shortname: "北京", level: "1", position: "tr_0", sort: "1"}
120000:{id: "120000", areaname: "天津", pid: "0", shortname: "天津", level: "1", position: "tr_0", sort: "2"}
130000:{id: "130000", areaname: "河北省", pid: "0", shortname: "河北", level: "1", position: "tr_0", sort: "3"}
140000:{id: "140000", areaname: "山西省", pid: "0", shortname: "山西", level: "1", position: "tr_0", sort: "4"}
150000:{id: "150000", areaname: "内蒙古自治区", pid: "0", shortname: "内蒙古", level: "1", position: "tr_0", sort: "5"}
210000:{id: "210000", areaname: "辽宁省", pid: "0", shortname: "辽宁", level: "1", position: "tr_0", sort: "6"}
220000:{id: "220000", areaname: "吉林省", pid: "0", shortname: "吉林", level: "1", position: "tr_0", sort: "7"}
230000:{id: "230000", areaname: "黑龙江省", pid: "0", shortname: "黑龙江", level: "1", position: "tr_0", sort: "8"}
310000:{id: "310000", areaname: "上海", pid: "0", shortname: "上海", level: "1", position: "tr_0", sort: "9"}
320000:{id: "320000", areaname: "江苏省", pid: "0", shortname: "江苏", level: "1", position: "tr_0", sort: "10"}
330000:{id: "330000", areaname: "浙江省", pid: "0", shortname: "浙江", level: "1", position: "tr_0", sort: "11"}
.....
},
state:"1"

如果没有数据 state=0

例子:

state:"0"

Javascript 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
Js四则运算函数代码
Jul 21 Javascript
js数组操作常用方法
May 08 Javascript
leaflet的开发入门教程
Nov 17 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
jquery 动态合并单元格的实现方法
Aug 26 #Javascript
轻松掌握JavaScript中介者模式
Aug 26 #Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 #Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 #Javascript
在线引用最新jquery文件的实现方法
Aug 26 #Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 #Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 #Javascript
You might like
php md5下16位和32位的实现代码
2008/04/09 PHP
php INI配置文件的解析实现分析
2011/01/04 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
php缓存技术详细总结
2013/08/07 PHP
php实现购物车功能(下)
2016/01/05 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
jQuery Tools tab使用介绍
2012/07/14 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
javascript折半查找详解
2015/01/26 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python生成ppt的方法
2018/06/07 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
python与字符编码问题
2019/05/24 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
农村葬礼主持词
2014/03/31 职场文书
学校搬迁方案
2014/06/15 职场文书
机动车交通事故协议书
2015/01/29 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
董事长岗位职责
2015/02/13 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
国庆节新闻稿
2015/07/17 职场文书