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

151 阅读 0 评论 100 点赞

我是靠谱客的博主会撒娇御姐，最近开发中收集的这篇文章主要介绍jQuery基于BootStrap样式实现无限极地区联动，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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"
　}...
}}