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实现twitter puddles算法实例
Dec 06 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
webpack 处理CSS资源的实现
Sep 27 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注入实例
2006/10/09 PHP
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php实现加减法验证码代码
2014/02/14 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
理解javascript回调函数
2014/12/28 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
Node.js事件驱动
2015/06/18 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
Javascript缓存API
2016/06/14 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
python图像处理之反色实现方法
2015/05/30 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
体育专业个人求职信范文
2013/12/27 职场文书
医学生职业规划范文
2014/01/05 职场文书
市场推广策划方案
2014/06/02 职场文书
个人查摆剖析材料
2014/10/04 职场文书
故意杀人案辩护词
2015/05/21 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
Redis基本数据类型Set常用操作命令
2022/06/01 Redis