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源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
Vue formData实现图片上传
Aug 20 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.ini中文版(2)
2006/10/09 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
Scala解析Json字符串的实例详解
2017/10/11 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
Python subprocess库的使用详解
2018/10/26 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
python使用建议与技巧分享(二)
2020/08/17 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
活动总结报告范文
2014/05/04 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python