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 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
vue实现div单选多选功能
Jul 16 Javascript
解决vue项目router切换太慢问题
Jul 19 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
php常量详细解析
2015/10/27 PHP
分享10段PHP常用代码
2015/11/11 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
layDate日期控件使用方法详解
2018/11/15 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python中logger日志模块详解
2020/08/04 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
大学生校园创业计划书
2014/02/08 职场文书
法律专业自荐信
2014/06/03 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
安全教育的主题班会
2015/08/13 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android