制作省市二级联动下拉菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/hhthwx/article/details/78029905

制作二级联动下拉菜单

<!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>