js實現區縣聯動

1. 引入區縣聯動函數以下,將provinceList中數據改成須要聯動的數據信息後端

var addressInit = function(_cmbProvince, _cmbCity, _cmbArea, _cmbStreet, defaultProvince, defaultCity, defaultArea,defaultStreet)    
{    
    var cmbProvince = document.getElementById(_cmbProvince);    
    var cmbCity = document.getElementById(_cmbCity);    
    var cmbArea = document.getElementById(_cmbArea);   
    var cmbStreet = document.getElementById(_cmbStreet);  
        
    function cmbSelect(cmb, str)    
    {    
        for(var i=0; i<cmb.options.length; i++)    
        {    
            if(cmb.options[i].value == str)    
            {    
                cmb.selectedIndex = i;    
                return;    
            }    
        }    
    }    
    function cmbAddOption(cmb, str, obj, num)    
    {    
        var option = document.createElement('OPTION');    
        cmb.options.add(option);    
        option.innerText = str;    
        option.value = num;    
        option.obj = obj;   
        console.log(num) 
    }    
        
   
    function changeProvince()    
    {    
        cmbCity.options.length = 0;    
        cmbCity.onchange = null;    
        if(cmbProvince.selectedIndex == -1)return;    
        var item = cmbProvince.options[cmbProvince.selectedIndex].obj;
        /**console.log(item)**/    
        for(var i=0; i<item.cityList.length; i++)    
        {    
            cmbAddOption(cmbCity, item.cityList[i].name, item.cityList[i],item.cityList[i].sleep);   
        }    
        cmbSelect(cmbCity, defaultCity);    
    }    
        
    for(var i=0; i<provinceList.length; i++)    
    {    
        cmbAddOption(cmbProvince, provinceList[i].name, provinceList[i],provinceList[i].sleep);    
    }    
    cmbSelect(cmbProvince, defaultProvince);    
    changeProvince();    
    cmbProvince.onchange = changeProvince;    
}    

/*用到的全部sleep爲自定義屬性,sleep能夠自定義爲指定數據,便於先後端數據交互*/    
var provinceList = [  
    {name:'所有',sleep:'0',//省級
        cityList:[//市級
            {name:'所有',sleep:'0',
                areaList:[//區縣級
                    {name:'所有',sleep:'0'}
                ]
            }
        ]
    },       
    {name:'陝西省',sleep:'1', 
        cityList:[               
            {name:'所有',sleep:'0',
                areaList:[
                    {name:'所有',sleep:'0'}
                ]
            },          
            {name:'西安市',sleep:'1',
                areaList:[
                    {name:'所有',sleep:'0'},
                    {name:'鄠邑區',sleep:'1'},
                    {name:'高新區',sleep:'2'}
                ]
            },  
            {name:'渭南市',sleep:'2',
                areaList:[
                    {name:'所有',sleep:'0'},
                    {name:'大荔縣',sleep:'1'},
                    {name:'蒲城縣',sleep:'2'}
                ]
            }
        ]
    },       
    {name:'浙江省',sleep:'2', 
        cityList:[              
            {name:'所有',sleep:'0',
                areaList:[
                    {name:'所有',sleep:'0'},
                    {name:'杭州市',sleep:'1'},
                    {name:'寧波市',sleep:'2'}
                ]
            },           
            {name:'杭州市',sleep:'1',
                areaList:[
                    {name:'所有',sleep:'0'},
                    {name:'蕭山區',sleep:'1'},
                    {name:'富陽區',sleep:'2'}
                ]
            },  
            {name:'寧波市',sleep:'2',
                areaList:[
                    {name:'所有',sleep:'0'},
                    {name:'江東區',sleep:'1'},
                    {name:'鎮海區',sleep:'2'}
                ]
            }                 
        ]
    }
];   

2. 在須要聯動的頁面調用addressInit()聯動函數函數

addressInit('省id','市id','區縣id');// 下拉框選擇聯動
相關文章
相關標籤/搜索