首页 > 代码库 > 省市区三级联动

省市区三级联动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市区三级联动</title>
        <script src="http://www.mamicode.com/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="http://www.mamicode.com/{{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=http://www.mamicode.com/‘+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=http://www.mamicode.com/‘+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=http://www.mamicode.com/‘+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="http://www.mamicode.com/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="http://www.mamicode.com/{{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=http://www.mamicode.com/‘+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>

 

省市区三级联动