jQuery基于BootStrap样式实现无限极地区联动


Posted in Javascript onAugust 26, 2016

HTML 部分

<div class="row" style="margin:100px auto;">
<form method="post">
<div class="col-md-12" id="area">
<div class="col-md-2 pr0">
<select name='area[]' num='0' class="form-control input-sm select" id="main" onchange="change(this)">
<option>请选择地区</option>
</select>
</div>
</div>
<button type="submit">tijiao</button>
</form>
</div>

js部分

<script>
// 首次获取 ajax数据
$.get("http://127.0.0.1:83/areas/sec", {id:'0'},
function(data){
var option="<option value=''>请选择</option>";
var list=data.data;
for(var key in list){
// console.log(key);
// console.log(data[key].areaname);
option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
}
$('#main').html(option);
},'jsonp');
function change(event){
$('.select').each(function(i){
//清除重选后的 老节点
console.log($(event).attr('num'));
if($(this).attr('num')>$(event).attr('num')){
$(this).parent().remove();
}
})
var sel=$('.select').index($(event))+1;
var id=$(event).val();
$.ajax({
type: "get",
dataType:"jsonp",
url: "http://127.0.0.1:83/areas/sec",
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>";
}
//$('#tmp').html(option);
//tmp=option
$('<div class="col-md-2 pr0"><select name="area[]" num="'+sel+'" class="form-control input-sm select" onchange="change(this)">'+option+'</select></div>').appendTo('#area');
}
}
});
}
</script>

后端返回的数据为

{
state:1,
data:{
{1:{
areaname:"呼和浩特市"
id:"150100"
level:"2"
pid:"150000"
 }...
}}

Javascript 相关文章推荐
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 #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
You might like
PHP基于单例模式实现的mysql类
2016/01/09 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
Python操作列表的常用方法分享
2014/02/13 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
办公室主任主任岗位责任制
2014/02/11 职场文书
会计助理岗位职责
2014/02/17 职场文书
会议主持词
2014/03/17 职场文书
中职招生先进个人材料
2014/08/31 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2015年安全生产责任书
2015/01/30 职场文书
律政俏佳人观后感
2015/06/09 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android