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 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
js中数组对象去重的两种方法
Jan 18 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 随机生成10位字符代码
2009/03/26 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python encode和decode的妙用
2009/09/02 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
简单而又朴实的个人求职信分享
2013/12/12 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
数字化校园建设方案
2014/05/03 职场文书
生活小常识广播稿
2014/09/16 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
毕业设计论文评语
2014/12/31 职场文书
幼师求职自荐信
2015/03/26 职场文书
总经理聘用协议书
2015/09/21 职场文书
如何使用vue3打造一个物料库
2021/05/08 Vue.js