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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
Javascript 继承实现例子
Aug 12 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
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中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
Python计算字符宽度的方法
2016/06/14 Python
Python入门必须知道的11个知识点
2018/03/21 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
盛大笔试题
2016/11/05 面试题
新学期家长寄语
2014/01/19 职场文书
人力资源求职信
2014/05/25 职场文书
求职简历自我评价2015
2015/03/10 职场文书
城南旧事电影观后感
2015/06/16 职场文书