<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./asset/bootstrap/dist/css/bootstrap.min.css"> <script src="./js/ajax.js"></script> <script src="./js/template-web.js"></script> </head> <body> <div class="container"> <div class="form-inline"> <div class="form-group"> <select class="form-control" id="province"> </select> </div> <div class="form-group"> <select class="form-control" id="city"> <option>请选择城市</option> </select> </div> <div class="form-group"> <select class="form-control" id="area"> <option>请选择县城</option> </select> </div> </div> </div> <script type="text/html" id="protpl"> <option>请选择省份</option> {{each province}} <option value={{$value.id}}>{{$value.name}}</option> {{/each}} </script> <script type="text/html" id="citytpl"> <option>请选择城市</option> {{each city}} <option value={{$value.id}}>{{$value.name}}</option> {{/each}} </script> <script type="text/html" id="areatpl"> <option>请选择县城</option> {{each area}} <option value={{$value.id}}>{{$value.name}}</option> {{/each}} </script> <script> var province = document.querySelector('#province') var city = document.querySelector('#city') var area = document.querySelector('#area') ajax({ type: 'get', url: 'http://localhost:3001/province', success: function(data) { console.log(data) var html = template('protpl', { province: data }) province.innerHTML = html }, error: function() {} }) province.onchange = function() { var pid = this.value var html = template('areatpl', { area: [] }) area.innerHTML = html ajax({ type: 'get', url: 'http://localhost:3001/cities', data: { id: pid }, success: function(data) { console.log(data) var html = template('citytpl', { city: data }) city.innerHTML = html }, error: function() {} }) } city.onchange = function() { var cid = this.value ajax({ type: 'get', url: 'http://localhost:3001/areas', data: { id: cid }, success: function(data) { console.log(data) var html = template('areatpl', { area: data }) area.innerHTML = html }, error: function() {} }) } </script> </body> </html>
