省市区三级联动

Posted 2020-09-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了省市区三级联动相关的知识，希望对你有一定的参考价值。

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

以上是关于省市区三级联动的主要内容，如果未能解决你的问题，请参考以下文章