Home  >  Article  >  Web Front-end  >  jQuery implements Infinitus regional linkage based on BootStrap style

jQuery implements Infinitus regional linkage based on BootStrap style

高洛峰
高洛峰Original
2017-03-22 15:15:091638browse

HTML part

<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 part

<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>

The data returned by the backend is

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

More jQuery based on BootStrap style implementation For articles related to Infinitus regional linkage, please pay attention to the PHP Chinese website!

Related articles:

Detailed explanation of Bootstrap’s pure CSS3 arrow button style

Detailed explanation of Bootstrap’s implementation of a beautiful and concise CSS3 price list example source code

Using Bootstrap form to create example code

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn