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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
浅谈重写window对象的方法
Dec 29 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 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
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
33道php常见面试题及答案
2015/07/06 PHP
php socket通信简单实现
2016/11/18 PHP
Javascript实现的分页函数
2006/12/22 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
python 切换root 执行命令的方法
2019/01/19 Python
python numpy 按行归一化的实例
2019/01/21 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python str字符串转uuid实例
2020/03/03 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
优秀护士先进事迹
2014/05/08 职场文书
教研处工作方案
2014/05/26 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python