二级联动（选择与改变事件）_new option(cityname[i],i)-优快云博客

本文链接：https://blog.youkuaiyun.com/Ada_yangyang/article/details/81254552

本文介绍使用JavaScript实现省市区级联下拉选择框的方法，包括两种不同的实现方式：一是手动创建选项元素并添加到城市选择框；二是利用HTML DOM方法add直接添加选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>onchange事件实现省市级联</title>
    <script>
        function changeCity(){
            //1.js中没有二维数组的概念，只能通过一维数组的元素又是一个一维数组的方式，来实现模拟二维数组的效果。
            var cities = new Array();
            cities[0] = new Array("");
            cities[1] = new Array('济南','青岛','泰安');
            cities[2] = new Array('长沙','衡阳');
            var selProvince = document.getElementById("province").value;
            var cityEle = document.getElementById("city");

            var city = cities[selProvince];
            //先要清空原来的城市，再去添加新的城市
            cityEle.options.length=0;
            for(var i=0; i<city.length; i++){
                var optionEle = document.createElement("option");
                optionEle.setAttribute("value",cities[i]);
                optionEle.innerHTML=city[i];
                //追加子节点
                cityEle.appendChild(optionEle);
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="changeCity()">
    <option value="0">请选择省份</option>
    <option value="1">山东</option>
    <option value="2">湖南</option>
</select>
<select id="city"></select>
</body>
</html>

第二种方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <title>onchange事件实现省市级联</title>
    <script>
        function changeCity(){
            //1.js中没有二维数组的概念，只能通过一维数组的元素又是一个一维数组的方式，来实现模拟二维数组的效果。
            var cities = new Array();
            cities[0] = new Array("");
            cities[1] = new Array('济南','青岛','泰安');
            cities[2] = new Array('长沙','衡阳');
            var selProvince = document.getElementById("province").value;
            var cityEle = document.getElementById("city");

            var city = cities[selProvince];
            //先要清空原来的城市，再去添加新的城市
            cityEle.options.length=0;
            for(var i=0; i<city.length; i++){
                //HTML DOM
                cityEle.add(new Option(city[i],city[i]));
            }
        }
    </script>
</head>
<body>
<select id="province" onchange="changeCity()">
    <option value="0">请选择省份</option>
    <option value="1">山东</option>
    <option value="2">湖南</option>
</select>
<select id="city"></select>
</body>
</html>