省:<select id="sheng">
    <option value="1">请选择省</option>
</select>
城市:<select id="city">
    <option value="11">请选择市</option>
</select>
区域:
<select id="qu">
    <option value="111">请选择区</option>
</select>
<script>
    /*
    * 思路:
    * 1、规划好布局
    * 2、明确有哪些事件,分别在什么对象上
    * 3、创建省市区的数据
    * */
    var json1=[
        {name:'四川省',citylist:[
            {name:'成都市',qulist:['金牛区','青羊区','武侯区','双流区']},
            {name:'内江市',qulist:['市中区','东兴区','高兴区','白马区']},
            {name:'泸州市',qulist:['江阳区','纳溪区','泸州一区']}]},
        {name:'湖南省',citylist:[
            {name:'长沙市',qulist:['芙蓉区','天兴区','雨花区','岳麓区']},
            {name:'衡阳市',qulist:['朱桂区','雁峰区','真阳区','石鼓区']},
            {name:'株洲市',qulist:['株洲一区','株洲二区','株洲三区']}]},
        {name:'广东省',citylist:[
            {name:'广州市',qulist:['白云区','天河区','黄浦区','越秀区']},
            {name:'深圳市',qulist:['宝安区','南山区','福田区','龙岗区']},
            {name:'东莞市',qulist:['长安区','虎门区','昌平区','东关一区']}]}]
    console.log(json1[0]['citylist'][0]['name'])

    //获取操作对象
    var sel=document.getElementById('sheng')
    var city=document.getElementById('city')
    var qu=document.getElementById('qu')
    //添加省份
    for(var i=0;i<json1.length;i++){
        var name1=json1[i].name
        sel.add(new Option(name1,name1))
    }
    //给省份绑定onchange事件,当省份选项改变时。添加对应的城市
    sel.onchange= function () {
        //清除当前下拉框中的选项
        qu.options.length=1
        city.options.length=1
        //获得选中的value值
        var shengvalue=sel.value
        //外层循环遍历省份
        for(var i=0;i<json1.length;i++){
            //判断遍历出来的省份是否跟选中的省份相等
            if(shengvalue==json1[i].name){
                //内层循环遍历该省份下所有城市
                for(var j=0;j<json1[i].citylist.length;j++){
                    city.add(new Option(json1[i]['citylist'][j].name,json1[i]['citylist'][j].name))
                }
            }
        }
    }
    city.onchange= function () {
        qu.options.length=1
        //获取省份和城市的value值
        var shengvalue=sel.value
        var cityvalue=city.value
        for(var i=0;i<json1.length;i++){
            if(shengvalue==json1[i].name){
                for(var j=0;j<json1[i].citylist.length;j++){
                    if(cityvalue==json1[i]['citylist'][j].name){
                        for(var z=0;z<json1[i]['citylist'][j].qulist.length;z++){
                            var qu1=json1[i]['citylist'][j]['qulist'][z]
                            qu.add(new Option(qu1,qu1))
                        }
                    }
                }
            }
        }
    }
</script>
Last modification:October 11th, 2019 at 08:52 am
如果觉得我的文章对你有用,请随意赞赏