利用JavaScript实现二级联动

淡淡的烟草味﹌ 2023-02-12 15:29 26阅读 0赞

## 利用JavaScript实现二级联动 ##

要实现JavaScript二级联动效果，首先要确定需要哪些技术：

1.  二维数组
2.  for in循环
3.  new Option(text,value,true,true)
4.  add(option,null)
5.  onchange() 表单事件

**HTML代码：**

请选择省份：
        <select name="" id="provinces">
            
            <option value="请选择省份">请选择省份</option>
        </select>
        请选择城市：
        <select name="" id="cities">
            <option value="请选择城市">请选择城市</option>
        </select>

**javascript代码：**

// 1.二维数组
        // 2.for in循环
        // 3.new Option(text,value,true,true)
        // 4.add(option,null)
        // 5.onchange() 表单事件 
    
        // 江苏省：南京市,无锡市,徐州市,常州市,苏州市,南通市;
        // 浙江省：杭州市,宁波市,金华市,温州市,绍兴市,湖州市;
        // var arr = [
        // [南京市, 无锡市, 徐州市, 常州市, 苏州市, 南通市],
        // [杭州市, 宁波市, 金华市, 温州市, 绍兴市, 湖州市]
        // ]
    
    
        // 1.创建二维数组
        var province=new Array();
        province["江苏省"]=["南京市", "无锡市", "徐州市", "常州市", "苏州市", "南通市"];
        province["浙江省"]=["杭州市", "宁波市", "金华市", "温州市", "绍兴市", "湖州市"];
    
        console.log(province);
    
        // 获取 省市 下拉菜单
        var oProvince=document.getElementById("provinces");
        var oCity=document.getElementById("cities");
        // 2.利用for循环将省市内容 添加到下拉菜单
        for(var i in province){ 
            // console.log(i);// 江苏省 浙江省
            // console.log(province[i])
            // new Option(i,i);//创建下拉选项
            oProvince.add(new Option(i,i),null)
        }
    
        // 3.添加onchange事件
        oProvince.onchange=function(){ 
            // console.log(oProvince.value);
            // 清空 市级下拉列表
            oCity.length=0;
            var oSelect=oProvince.value;//获取选中的省份值
            for(var j in province[oSelect]){ 
                oCity.add(new Option(province[oSelect][j],province[oSelect][j]),null)
            }
        }
    
        // var arr=[1,2,3,4,5,6];
        // for(var i in arr){ 
        // console.log(i);
        // }
        
         // onchange事件
        // document.getElementById("text").οnchange=function(){ 
        // console.log(this.value);
        // }

**视频讲解链接：  
https://www.bilibili.com/video/BV1DA411q71W/**