<!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>