三十九、Jquery三級聯動dome
阿新 • • 發佈：2018-12-16
說明：和js的三級聯動dome寫法一致，只是用jquery語法；
另外資料這次採用json資料格式做示範；
注意：json資料中同級關係的名稱一致，方便後面的訪問，子父級關係的名稱可以一致也可以不一致；
另外，還需要處理選擇請選擇時的bug(設定預設value=””,當獲取的value值為空時，跳出當前程式)
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 省： <select id="provice"> <option value="">--請選擇--</option> </select> 市： <select id="city"> <option value="">--請選擇--</option> </select> 區： <select id="qu"> <option value="">--請選擇--</option> </select> <script src="js/jquery-3.0.0.js"></script> <script> //構建資料 var city=[ { "provicename":"陝西省", "proviceChild":[ { "cityname":"西安市", "cityChild":[ {"quname":"蓮湖區"}, {"quname":"長安區"}, {"quname":"未央區"}, {"quname":"高新區"}, {"quname":"雁塔區"} ] }, { "cityname":"寶雞市", "cityChild":[ {"quname":"金臺區"}, {"quname":"成倉區"}, {"quname":"高新區"}, {"quname":"渭濱區"} ] }, { "cityname":"咸陽市", "cityChild":[ {"quname":"咸陽市1"}, {"quname":"咸陽市2"}, {"quname":"咸陽市3"}, {"quname":"咸陽市4"} ] }, { "cityname":"延安市", "cityChild":[ {"quname":"延安市1"}, {"quname":"延安市2"}, {"quname":"延安市3"}, {"quname":"延安市4"} ] }, { "cityname":"漢中市", "cityChild":[ {"quname":"漢中市1"}, {"quname":"漢中市2"}, {"quname":"漢中市3"}, {"quname":"漢中市4"} ] } ] }, { "provicename":"四川省", "proviceChild":[] } ]; //省級 for(var i=0;i<city.length;i++){ var option=$("<option></option>"); option.val(i); option.html(city[i].provicename); $("#provice").append(option); } //市級 利用省級文字改變事件 var cityindex=0;//用來標記市 $("#provice").change(function(){ //每次改變 清除市、區內容 $("#city option:gt(0)").remove(); $("#qu option:gt(0)").remove(); var index=$(this).val(); //這裡得處理點選請選擇的bug if(index=="")return; cityindex=city[index].proviceChild; for(var i=0;i<city[index].proviceChild.length;i++){ var option=$("<option></option>"); option.val(i); option.html(city[index].proviceChild[i].cityname); $("#city").append(option); } }); //區級 利用市級文字改變事件 $("#city").change(function(){ //每次改變 移除區內容 $("#qu option:gt(0)").remove(); var index=$(this).val(); if(index=="")return; for(var i=0;i<cityindex[index].cityChild.length;i++){ var option=$("<option></option>"); option.val(i); option.html(cityindex[index].cityChild[i].quname); $("#qu").append(option); } }); </script> </body> </html>