首頁 > web前端 > js教程 > jQuery基於BootStrap樣式實現無限極地區連動

jQuery基於BootStrap樣式實現無限極地區連動

高洛峰
發布: 2017-03-22 15:15:09
原創
1767 人瀏覽過

HTML 部分

1

2

3

4

5

6

7

8

9

10

11

12

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

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

登入後複製

後端回傳的資料為

1

2

3

4

5

6

7

8

9

10

{

state:1,

data:{

{1:{

areaname:"呼和浩特市"

id:"150100"

level:"2"

pid:"150000"

 }...

}}

登入後複製

更多jQuery基於BootStrap樣式實現無限極地區聯動相關文章請關注PHreee

更多jQuery基於BootStrap樣式實現無限極地區聯動網絡!

相關文章:

詳解Bootstrap的純CSS3箭頭按鈕樣式

詳解Bootstrap實作漂亮簡潔的CSS3價格表實例原始碼

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板