小白前端進階模塊1————國省市縣聯動
阿新 • • 發佈：2019-01-29
char 選擇 error 遇到的問題 ole 返回 鄭州市 empty 表數
1.分析任務
使用AJAX讀取JSON文件數據，利用循環及條件語句將所需要的數據分別存儲在各個數組中，結合change事件即可達到所需功能
2.優缺點分析
優點：不僅在實現其基本功能，還可在json文件中更改index的屬性值，更改下拉列表中的順序。
缺點：越到低層，嵌套越嚴重，但無法避免（自認為）
3.代碼展示
linkage.html 文件：
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <link rel="stylesheet" href="css/linkage.css">5 <script src="jquery/jquery-1.7.1.js"></script> 6 <script src="js/link.js"></script> 7 </head> 8 <body> 9 <div><select class="one"><option id="q1">請選擇國家</option></select></div> 10 <div><select class="two"></select></div> 11 <div><select class="three"></select></div> 12 <div><select class="four">></select></div> 13 </body> 14 </html>
link.js文件展示:
$(document).ready(function () { $.ajax({ url:‘data/linkage.json‘, type:"post", dataType:"json", success:function(data){ /*國家*/ var arr1 = []; $.each(data.nation,function (i,e) { arr1[e.index]=e.name; }); $.each(arr1,function () { if(this!=null){ $(".one").append("<option>" + this+ "</option>"); } }); /*省份*/ var arr2 = []; $(".one").change(function() { var one_text=$(".one option:selected").text(); $(".two").empty(); $(".three").empty(); $(".four").empty(); $(".two").append("<option>" + "請選擇省份"+ "</option>"); $.each(data.nation,function (i,e) { if(e.name==one_text){ $.each(e.province,function (j,h) { console.log(h.name); arr2[h.index]=h.name; }) } }) $.each(arr2,function () { if(this!=null){ $(".two").append("<option>" + this+ "</option>"); } }) console.log(arr2); }); /* 市*/ var arr3=[]; $(".two").change(function() { var one_text=$(".one option:selected").text(); var two_text=$(".two option:selected").text(); $(".three").empty(); $(".four").empty(); $(".three").append("<option>" + "請選擇市"+ "</option>"); $.each(data.nation,function (i,e) { if(e.name==one_text){ $.each(e.province,function (j,h) { if(h.name==two_text) { $.each(h.city,function (k,r) { console.log(r.name); arr3[r.index]=r.name; }) } }) } }) $.each(arr3,function () { if(this!=null){ $(".three").append("<option>" + this+ "</option>"); } }) }); /*縣*/ var arr4=[]; $(".three").change(function() { var one_text=$(".one option:selected").text(); var two_text=$(".two option:selected").text(); var three_text=$(".three option:selected").text(); $(".four").empty(); $(".four").append("<option>" + "請選擇縣"+ "</option>"); $.each(data.nation,function (i,e) { if(e.name==one_text){ $.each(e.province,function (j,h) { if(h.name==two_text) { $.each(h.city,function (k,r) { if(r.name==three_text) { $.each(r.county,function (l,g) { arr4[g.index]=g.name; }) } }) } }) } }) $.each(arr4,function () { if(this!=null){ $(".four").append("<option>" + this+ "</option>"); } }); // wer(); /* function wer() { for (var num = 0; num < data.nation.length; num++) { $(".one").append("<option>" + data.nation[num].name + "</option>"); } }*/ // function wer() { // $.each(data，function(i,val){ // // // $(".one").append("<option>" + onelink.nation[index].name + "</option>"); // }) // } }); }, error:function(){ alert(0) } }) })
linkage.json文件部分展示:
{
"nation": [
{
"name": "中國",
"index":1,
"province": [
{
"name": "河南省",
"index":0,
"city": [
{
"name": "鄭州市",
"index":0,
"county": [
{
"name": "鄭一縣",
"index":0
},
{
"name": "鄭二縣",
"index":1
}
]
},
4.實際操作中所遇到的問題:
在取json的值時取不到，以為是沒有轉換為json對象取不到值，後面循序去取數組對象的值，才把值取到。
5.知識了解：JSON對象和JSON字符串的轉換json是以字符串的形式進行傳遞，而json操作的是json對象。
json字符串:var str=‘{"name" : " Alica" ,"age" : " 12"}‘;
json對象:var obj={"name" : " Alica" ,"age" : " 12"};
String轉換為json對象: var obj=eval(‘(‘+str+‘)‘);
json對象轉換為String:var str=obj.toJSONString();
6.知識了解： jQuery遍歷json對象
grep：
each：
1 $.each(arr, function(i, item){ 2 3 });
其中arr代表的是一個數組對象，i 代表數組下標，item代表數組下標取到的內容
inArray：
var anArray = [‘one‘,‘two‘,‘three‘]; var index = $.inArray(‘two‘,anArray); alert(index);//返回該值在數組中的鍵值，返回1 alert(anArray[index]);//彈出 two
可根據inArray根據內容獲取內容所對應的鍵值
map：
小白前端進階模塊1————國省市縣聯動