红色为：引入的框架或模块
天蓝色为：tamplate模块
淡黄色为：tamplate语法
淡绿色为：获取html中的元素
淡橙色为：使用tamplate函数传值（返回模板数据），并将数据拼接到html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>省市区联动</title> 6 <link rel="stylesheet" type="text/css" href="/assets/bootstrap/dist/css/bootstrap.min.css"> 7 <style type="text/css"> 8 .container{ 9 padding-top:150px; 10 } 11 </style> 12 </head> 13 <body> 14 <div class="container"> 15 <div class="form-inline"> 16 <div class="form-group"> 17 <select class="form-control" id="province"> 18 <option>请选择省份</option> 19 </select> 20 </div> 21 <div class='form-group'> 22 <select class="form-control" id="city"> 23 <option>请选择城市</option> 24 </select> 25 </div> 26 <div class='form-group'> 27 <select class='form-control' id="area"> 28 <option>请选择县城</option> 29 </select> 30 </div> 31 </div> 32 </div> 33 <!-- script --> 34 <script type="text/javascript" src="/js/ajax.js"></script> 35 <script type="text/javascript" src="/js/template-web.js"></script> 36 <script type="text/html" id="provinceTpl"> 37 <option>请选择省份</option> 38 {{each province}} 39 <option value="{{$value.id}}">{{$value.name}}</option> 40 {{/each}} 41 </script> 42 <script type="text/html" id=cityTpl> 43 <option>请选择城市</option> 44 {{each city}} 45 <option value="{{$value.id}}">{{$value.name}}</option> 46 {{/each}} 47 </script> 48 <script type="text/html" id="areaTpl"> 49 <option>请选择县城</option> 50 {{each area}} 51 <option value="{{$value.id}}">{{$value.name}}</option> 52 {{/each}} 53 </script> 54 <script type="text/javascript"> 55 //获取省市区下拉框元素 56 var province=document.getElementById("province"); 57 var city=document.getElementById("city"); 58 var area=document.getElementById("area"); 59 //获取省份信息 60 ajax({ 61 type:'get', 62 url:'http://localhost:3000/province', 63 success:function(data){ 64 //将服务器返回的数据和html进行拼接 65 var Prohtml=template("provinceTpl",{province:data}); 66 //console.log(Prohtml); 67 //将拼接好的html字符串显示再页面中 68 province.innerHTML=Prohtml; 69 } 70 }); 71 72 //为省份的下拉框添加值改变事件 73 province.onchange=function(){ 74 //获取省份id 75 var pid=this.value; 76 77 //清空区下拉框中的数据 78 var html=template('areaTpl',{area:[]}); 79 area.innerHTML=html; 80 //根据省份id获取城市信息 81 ajax({ 82 type:'get', 83 url:'http://localhost:3000/cities', 84 data:{ 85 id:pid 86 }, 87 success:function(data){ 88 //console.log(data); 89 var Cityhtml=template("cityTpl",{city:data}); 90 city.innerHTML=Cityhtml; 91 } 92 }) 93 } 94 //当用户选择城市的时候 95 city.onchange=function(){ 96 //获取城市id 97 var cid=this.value; 98 //根据城市id 获取区信息 99 ajax({ 100 type:'get', 101 url:'/areas', 102 data:{ 103 id:cid 104 }, 105 success:function(result){ 106 //console.log(result); 107 var Areahtml=template("areaTpl",{area:result}); 108 //console.log(Areahtml); 109 area.innerHTML=Areahtml; 110 } 111 }) 112 } 113 </script> 114 </body> 115 </html>
接口文档截图：
