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 相关文章推荐
如何将php数组或者对象传递给javascript
Mar 20 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 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 获取本地IP代码
2013/06/23 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
js计数器代码
2006/11/04 Javascript
实现复选框全选/全不选切换
2006/12/23 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
Jquery 扩展方法
2010/05/06 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
python实现机器人行走效果
2018/01/29 Python
Python字典遍历操作实例小结
2019/03/05 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
Linux操作面试题
2015/02/11 面试题
新郎父亲婚宴答谢词
2014/01/11 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
雾霾停课通知
2015/04/24 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
机器人瓦力观后感
2015/06/12 职场文书
谢师宴学生致辞
2015/07/27 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书