从网站找了个JQ多级联动组件，做了一些修改
新增功能如下
① 支持多级联动，最多支持4级
② 实现异步加载下级元素，提供缓存机制，对已获取的数据缓存在JS中
③ 支持重新唤起筛选
④ 支持初始化分类设置
⑤ 去除部分元素 保留核心功能
⑥ 支持自定义主标题和子标题
⑦ 支持直辖区模式显示
兼容样式
.ui-form-item input, .ui-form-item textarea {
text-align: left;
width: 100%;
min-height: 25px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
border: 0;
background: 0 0;
padding-left: 0;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
outline: 0;
font-size: 1rem;
}
.ui-form-item input, .ui-form-item input:focus, .ui-form-item input:active {
user-select: text;
}
ul.area-list, li {
list-style: none outside none;
}
.area-list ,.area-list li {
padding: 0 10px;
margin: 0;
font-size: 14px;
height: 44px;
line-height: 44px;
}
.selet-area-wrap span {
font-size: 14px;
top: 10px;
}
.selet-area-wrap span.current:before {
top: 24px;
}
.selet-area-wrap p {
padding: 0;
margin: 0;
}使用演示
设定目标input元素 用如下css代码美化
<div class="item-content ui-select">
<input class="inpu-box" id="expressArea1" data-name="custRa" data-required="true" data-label="居住地址" placeholder="选择省市区" readonly style="padding-left:0;">
</div>引入JQ组件
<script type="text/javascript" src="/assets/js/jquery-1.7.2.min.js"></script>引入修改后的jquery.area组件
<script src="/assets/js/area/jquery.area.js" type="text/javascript" charset="utf-8"></script>初始化多级分类组件 传入json对象 在回调函数中实现每一级的列表对象集合，每个对象得包括 id,pid,name三个字段
var mul_type = new mulTypes({'level':4,'selector':'.inpu-box','title':'选择省市区','sub_title':'选择省份/地区','callback':function(pid,callBack){
//获取分类的函数
$.post('/plugin.php?id=jy_yd:api&mod=types',{
pid:pid,
},function(res){
if (res.status==1) {
callBack(res.data);
}
})
}}); json对象的参数如下
| 字段 | 解释 | 说明 |
| level_1 | 第一级元素集合 | {'id':'1','pid':0,'name':'aaa'},{},......] 可选不传入将异步加载 |
| level_2 | 第二级元素集合 与level1不同 | 存放第二层列表 里面是 保留是一级PID:{数据} |
| level_3 | 同上 | 保留是二级PID:{数据} |
| level_4 | 同上 | 保留是三级PID:{数据} |
| level | 支持的分类级数 | 默认支持三级分类 |
| title | 主标题 | 可为空 |
| sub_title | 子标题 | 可为空 |
| selector | 绑定在input上的目标选择器样式 | 必填 如 .myclass |
| callback | 回调函数 | 如果需要异步加载必须在外部实现 |
外部常用操作
获取最终分类ID 最后一级的ID值 getLastResult()
初始化分类内容 showResult(data) data数据为数组 里面依次存储每一级的对象数据 [{'id':'','pid':'','name':''},{},{},{}]
返回分类结果 存储每一级的元素内容 返回数组 getResult()
