BootStrap无限级分类(无限极分类封装版)

最新推荐文章于 2022-05-11 14:59:53 发布

chimeiyan8610

最新推荐文章于 2022-05-11 14:59:53 发布

阅读量554

点赞数

文章标签： javascript java 前端 ViewUI

原文链接：https://my.oschina.net/u/3270404/blog/845851

版权

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"

转载于:https://my.oschina.net/u/3270404/blog/845851

chimeiyan8610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫