jQuery基于BootStrap样式实现无限极地区联动
HTML部分
<divclass="row"style="margin:100pxauto;">
<formmethod="post">
<divclass="col-md-12"id="area">
<divclass="col-md-2pr0">
<selectname='area[]'num='0'class="form-controlinput-smselect"id="main"onchange="change(this)">
<option>请选择地区</option>
</select>
</div>
</div>
<buttontype="submit">tijiao</button>
</form>
</div>
js部分
<script>
//首次获取ajax数据
$.get("http://127.0.0.1:83/areas/sec",{id:'0'},
function(data){
varoption="<optionvalue=''>请选择</option>";
varlist=data.data;
for(varkeyinlist){
//console.log(key);
//console.log(data[key].areaname);
option+="<optionvalue='"+key+"'>"+list[key].areaname+"</option>";
}
$('#main').html(option);
},'jsonp');
functionchange(event){
$('.select').each(function(i){
//清除重选后的老节点
console.log($(event).attr('num'));
if($(this).attr('num')>$(event).attr('num')){
$(this).parent().remove();
}
})
varsel=$('.select').index($(event))+1;
varid=$(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);
varlist=data.data
if(data.state==='1'){
varoption="<optionvalue=''>请选择</option>";
for(varkeyinlist){
option+="<optionvalue='"+key+"'>"+list[key].areaname+"</option>";
}
//$('#tmp').html(option);
//tmp=option
$('<divclass="col-md-2pr0"><selectname="area[]"num="'+sel+'"class="form-controlinput-smselect"onchange="change(this)">'+option+'</select></div>').appendTo('#area');
}
}
});
}
</script>
后端返回的数据为
{
state:1,
data:{
{1:{
areaname:"呼和浩特市"
id:"150100"
level:"2"
pid:"150000"
}...
}}