<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<script src="/js/template.js"></script>
</head>
<body>
<h1>省市区三级联动</h1>
<select id="province" onchange="changecity(this.value);">
<option>请选择省份</option>
</select>
<select id="city" onchange="changearea(this.value);">
<option>请选择城市</option>
</select>
<select id="area">
<option>请选择区县</option>
</select>
<!--第二步：编写模板-->
<script id="citytmpl" type="text/html">
<option value="{{code}}">{{name}}</option>
</script>
<!--第三步：渲染模板-->
<script>
window.onload=function(){
var ajax=new XMLHttpRequest();
ajax.open('get','/get_province.html?code=0');
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
//console.log(ajax.responseText);
//将接收到的文本数据转换为 JSON对象
eval('var data='+ajax.responseText);
var html='';
for(var i in data){
html+=template('citytmpl',data[i]);
}
province.innerHTML+=html;
}
}
ajax.send();
}
function changecity(code){
var ajax=new XMLHttpRequest();
ajax.open('get','/get_city.html?code='+code);
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
//console.log(ajax.responseText);
//将接收到的文本数据转换为 JSON对象
eval('var data='+ajax.responseText);
var html='<option>请选择城市</option>';
for(var i in data){
html+=template('citytmpl',data[i]);
}
city.innerHTML=html;
area.innerHTML='<option>请选择区县</option>';
}
}
ajax.send();
}
function changearea(code){
var ajax=new XMLHttpRequest();
ajax.open('get','/get_area.html?code='+code);
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
//console.log(ajax.responseText);
//将接收到的文本数据转换为 JSON对象
eval('var data='+ajax.responseText);
var html='<option>请选择区县</option>';
for(var i in data){
html+=template('citytmpl',data[i]);
}
area.innerHTML=html;
}
}
ajax.send();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<script src="/js/template.js"></script>
</head>
<body>
<h1>省市区三级联动</h1>
<select id="province" onchange="showcity('city',this.value);">
<option>请选择省份</option>
</select>
<select id="city" onchange="showcity('area',this.value);">
<option>请选择城市</option>
</select>
<select id="area">
<option>请选择区县</option>
</select>
<!--第二步：编写模板-->
<script id="citytmpl" type="text/html">
<option value="{{code}}">{{name}}</option>
</script>
<!--第三步：渲染模板-->
<script>
window.onload=function(){
showcity('province',0);
}
function showcity(id,code){
var ajax=new XMLHttpRequest();
ajax.open('get','/get_city.html?code='+code);
ajax.onreadystatechange=function(){
if(ajax.readyState==4 && ajax.status==200){
eval('var data='+ajax.responseText);
var html=''; //HTML内容的初始化
switch(id){
case 'province': html='<option>请选择省份</option>';break;
case 'city': html='<option>请选择城市</option>';break;
case 'area': html='<option>请选择区县</option>';break;
}
for(var i in data){
html+=template('citytmpl',data[i]);
}
document.getElementById(id).innerHTML=html;
//当选择的是省份时，将区县初始化
if(id=='city'){
area.innerHTML='<option>请选择区县</option>';
}
}
}
ajax.send();
}
</script>
</body>
</html>
