二级菜单联动效果实现

页面里有个选择地点的选项框，实现之后的效果是选择了省市自动填充市区到二级选项框内，最近重看了这块的代码，结合例子总结了一下：

   

 省/市
    <select name="省市" id="province"></select>
 市/区
    <select name="市区" id="city"></select>

　　

    

    <script>
        let arr_province = ['请选择省/直辖市','北京市','上海市','广东省'];
        let arr_city = [
            ['请选择市/区'],
            ['东城区','西城区','朝阳区','宣武区','昌平区','大兴区','丰台区','海定区'],
            ['宝山区','长宁区','奉贤区','虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
            ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']
        ];              
        let province = document.getElementById('province');
        let city = document.getElementById('city');
        //一级菜单初始化
        province.length = arr_province.length;
        for (let i = 0; i < arr_province.length; i++) {
            province.options[i].text = arr_province[i];                
        }
        //二级菜单初始化
        city.length = 1;
        city.options[0].text = arr_city[0][0];

        province.onchange = function(){
            let index = province.selectedIndex;
            city.length = arr_city[index].length;
            for(let i = 0; i < city.length; i++){
                city.options[i].text = arr_city[index][i];
            }
        }        
    </script>

　　

 

 

需要注意的是：一级菜单数据需要和二级菜单数据一一对应，否则会出现省市对应不同的市区