省份地区三级联动的简单实现

在此直接导入代码，详细内容代码中有注释，相应需要引入的文件大家可以自己到相应网站下载：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--省份-->
        <select id="province" name="province">
                        
                    </select>
                    
                    <!--城市-->
                    <select id="citys" name="city">
                        <option id='false'>所在城市</option>
                    </select>
                    
                    <!--地区-->
                    <select id="dist" class="clear-Mar" name="district">
                        <option value="0">所在区</option>
                    </select>
        
        
        
    <script src="./js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>    
    <script type="text/javascript">
    
     var sltProvince=document.getElementById('province')
//      console.log(sltProvince.childNodes)
        //获得城市下拉框的对象
        //var sltCity=document.forms[0].city; 
    var sltCity=document.getElementById('citys')
    //获得市区下拉框的对象
    //var sltDistrict=document.forms[0].district;
    var sltDistrict=document.getElementById('dist')
        
        //ajax请求本地json文件数据，并添加到指定的位置
        $(document).ready(function () {
        $.ajax({
            url: './js/province.json',
            async: false,
            success: function (res) {
                
                //console.log(res)
                var sheng = res
                var text_sh = `<option id='false'>所在省份</option>`
                for(var i=0;i<sheng.length;i++){
//                    console.log(sheng[i]['text'])
                    var sh = sheng[i]['text']
                    var sid = sheng[i]['value']
                    
                    tt = `<option id="${sid}">${sh}</option>`
                    text_sh = text_sh+tt
                    
                }
                
                $('#province').html(text_sh)
            }
        });
    });

sltProvince.onchange=function(eve){
    //成功获取被点击的option标签的id
//    console.log($(this).find("option:checked").attr("id"))
    var optionId=$(this).find("option:checked").attr("id")
    
    $(document).ready(function () {
        $.ajax({
            url: './js/city.json',
            async: false,
            success: function (res) {
                var city = res
//                console.log('城市',city)
                
                var text_city = ``
                 
                 //循环json对象形式的数据方法
                for(var key in city){
                    
                    console.log('单个city',key,city[key])
                    //console.log(key==optionId)
                    //判断省id对应city的id是否一致
                    if(key==optionId){
                        for(i=0;i<city[key].length;i++){
                        var s_city = city[key][i]['text']
                        var s_sid = city[key][i]['value']
//                        console.log(123,s_city)
                    
                        tt = `<option id="${s_sid}">${s_city}</option>`
                        text_city = text_city+tt
                        }
//                        console.log(45556,text_city)
                        $('#citys').html(text_city)
                    }
//                    else{
//                        console.log('不存在')
//                    }
    
                }
                

            }
        });
    });
    
}
sltCity.onchange=function(eve){
    
    //成功获取被点击的option标签的id
    console.log($(this).find("option:checked").attr("id"))
    var optionId=$(this).find("option:checked").attr("id")
    
    $(document).ready(function () {
        $.ajax({
            url: './js/dists.json',
            async: false,
            success: function (res) {
                var city = res
//                console.log('城市',city)
                var text_city = ``
                 
                 //循环json对象形式的数据方法
                for(var key in city){
                    
//                    console.log('单个city',key,city[key])
                    //console.log(key==optionId)
                    //判断省id对应city的id是否一致
                    if(key==optionId){
                        for(i=0;i<city[key].length;i++){
                        var s_city = city[key][i]['text']
                        var s_sid = city[key][i]['value']
//                        console.log(123,s_city)
                    
                        tt = `<option id="${s_sid}">${s_city}</option>`
                        text_city = text_city+tt
                        }
//                        console.log(45556,text_city)
                        $('#dist').html(text_city)
                    }
//                    else{
//                        console.log('不存在')
//                    }
    
                }
                

            }
        });
    });
    
    
    
}
        
        
    </script>
    </body>
</html>
省份地区三级联动的简单实现

猜你喜欢
