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

HTML 部分

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

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
$('<p class="col-md-2 pr0"><select name="area[]" num="'+sel+'" class="form-control input-sm select" onchange="change(this)">'+option+'</select></p>').appendTo('#area');
}
}
});
}
</script>

后端返回的数据为

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

更多jQuery基于BootStrap样式实现无限极地区联动相关文章请关注PHP中文网！

相关文章：

详解Bootstrap的纯CSS3箭头按钮样式

详解Bootstrap实现漂亮简洁的CSS3价格表实例源码

使用Bootstrap表单制作实例代码