JQuery：省、市、區三級級聯
阿新 • • 發佈：2018-12-03
主要功能：實現省市區三級聯動（選擇省之後，然後可以選擇相應的市，最後可以選擇相應的區）
主要技術：JQuery，js ，html
主要程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市區三級級聯</title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script type="text/javascript" src="js/cityjson.js"></script> <script type="text/javascript"> //JQuery入口函式 $(function(){ //1.得出省的名稱 $.each(data,function(index,item){ //console.log(item,name); $("#province").append("<option value="+index+">"+item.name+"</option>"); }); //2.根據省，得出相應市的名稱 $("#province").bind("change",function(){ //清空上一次得到的值 $("#city").empty(); //清空之後，開始的選擇提示一併會被清除，再次新增 $("city").append("<option>請選擇</option>"); //獲取省的值 var index_pro=$("#province").val(); $.each(data[index_pro].child,function(index,item){ $("#city").append("<option value="+index+">"+item.name+"</option>"); }); }) //3.根據省、市，獲取相應區的名稱 $("#city").bind("change",function(){ $("#region").empty(); $("#region").append("<option>請選擇</option>"); var index_pro=$("#province").val(); var index_city=$("#city").val(); $.each(data[index_pro].child[index_city].child, function(index,item) { $("#region").append("<option value="+index+">"+item+"</option>"); }); }) }) </script> </head> <body> 省：<select id="province"><option >請選擇</option></select> 市：<select id="city"><option >請選擇</option></select> 區：<select id="region"><option >請選擇</option></select> </body> </html>