jQuery implémente la liaison régionale Infinitus basée sur le style BootStrap

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

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

Les données renvoyées par le backend sont

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

Plus de Multi-jQuery basé sur le style BootStrap pour obtenir des articles liés aux liens régionaux Infinitus, veuillez faire attention au site Web PHP chinois !

Articles connexes :

Explication détaillée du style de bouton fléché CSS3 pur de Bootstrap

Explication détaillée de l'implémentation par Bootstrap d'un CSS3 beau et concis Exemple de code source de liste de prix

Utilisez le formulaire Bootstrap pour créer un exemple de code