二级联动下拉单

来源：互联网发布：网易popo mac 编辑：程序博客网时间：2024/06/06 01:37
制作二级联动下拉菜单

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>省市二级联动</title></head><body>//当省按钮内的内容被改变时就触发这个函数，将与之对应的城市添加到第二个选项栏中去//this传入当前被选择的省份所对应的索引值，下面函数用来找到对应的城市数组  <select id="province" size="1" onchange = "getChange(this.selectedIndex)">  </select>  <select id="city" style="width: 90px" >  </select>  <script type="text/javascript">    var province = ["北京","上海","天津"];    var arr = new Array();    arr[0] = "东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀"    arr[1] = "黄埔,卢湾,徐汇,长宁,静安,普陀,虹口,杨浦"    arr[2] = "和平,河东,南开,北辰,河北,武清,蓟县"    //当窗体加载完成之后，完成以下几件事情    //1.将省选项添加到选项中    //2.在城市的选项中“添加请选择城市”内容    window.onload = function(){        var province1 = document.getElementById("province");        for(var i = 0;i<province.length;i++){            province1[i] = new Option(province[i],i);            //通过以下这种方法也可以添加新的选项            // province1.options.add(new Option(province[i],i),null);        }        var city = document.getElementById("city");        //new Option()有两个参数，第一个参数是文本值，第二个参数是值        city[0] = new Option("请选择城市","请选择城市");    }     function getChange(Index){        var city = document.getElementById("city");        var cityArr = arr[Index].split(",");//转换成字符串数组        //循环把对应城市数组内容添加到选项中去        for(var j = 0;j < cityArr.length;j++){            city[j] = new Option(cityArr[j],j);        }     }  </script></body></html>
阅读全文
0 0