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=&#39;area[]&#39; num=&#39;0&#39; 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:&#39;0&#39;},
function(data){
var option="<option value=&#39;&#39;>请选择</option>";
var list=data.data;
for(var key in list){
// console.log(key);
// console.log(data[key].areaname);
option+="<option value=&#39;"+key+"&#39;>"+list[key].areaname+"</option>";
}
$(&#39;#main&#39;).html(option);
},&#39;jsonp&#39;);
function change(event){
$(&#39;.select&#39;).each(function(i){
//清除重选后的 老节点
console.log($(event).attr(&#39;num&#39;));
if($(this).attr(&#39;num&#39;)>$(event).attr(&#39;num&#39;)){
$(this).parent().remove();
}
})
var sel=$(&#39;.select&#39;).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===&#39;1&#39;){
var option="<option value=&#39;&#39;>请选择</option>";
for(var key in list){
option+="<option value=&#39;"+key+"&#39;>"+list[key].areaname+"</option>";
}
//$(&#39;#tmp&#39;).html(option);
//tmp=option
$(&#39;<p class="col-md-2 pr0"><select name="area[]" num="&#39;+sel+&#39;" class="form-control input-sm select" onchange="change(this)">&#39;+option+&#39;</select></p>&#39;).appendTo(&#39;#area&#39;);
}
}
});
}
</script>

后端返回的数据为

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

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

相关文章：

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

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

使用Bootstrap表单制作实例代码