效果图：

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 2 -->
    <script type="text/javascript">
        var areas = ["northeast", "north China", "east China", "south China", "central China", "northwest", "southwest", "Hong Kong, Macao and Taiwan"];
        // 定义provinces：
        var provinces = new Array();
        // "northeast"
        provinces[0] = ["Liaoning LN", "Jilin JL", "Heilongjiang HL"];
        // "north China"
        provinces[1] = ["Beijing BJ", "Tianjing TJ", "Shanxi SX", "Inner Mongoria IM（NM）", "Hebei HE"];
        // "east China"
        provinces[2] = ["Shanghai SH", "Jiangsu JS", "Shandong SD", "Anhui AH", "Zhejiang ZJ", "Jiangxi JX "];
        // "south China"
        provinces[3] = ["Guangdong GD", "Guangxi GX", "Yunnan YN", "Fujian FJ", "Hainan HI", "Guizhou GZ"];
        // "central China"
        provinces[4] = ["Henan HA", "Hubei HB", "Hunan HN"];
        //  "northwest"
        provinces[5] = ["Shaanxi SN", "Gansu GS", "Xinjiang XJ", "Qinghai QH", "Ningxia NX"];
        // "southwest"
        provinces[6] = ["Sichuan SC", "Tibet XZ", "Chongqing CQ"];
        // "Hong Kong, Macao and Taiwan"
        provinces[7] = ["Hong Kong HK", "Macao MO", "Taiwan TW"];

        window.onload = function (ev) {
            // 得到下拉菜单对象
            var area = document.getElementById("area");
            // areas下拉菜单初始化
            for (var i = 0; i < areas.length; i++) {
                // 创建一个option对象
                var op = new Option(areas[i], i);
                // 将新创建的选项对象添加
                area.options.add(op);
            }
            // 针对下拉菜单的修改选项事件
            area.onchange = function (ev2) {
                var areaIn = this.value;
                console.log("areaIndex:" + areaIn);
                var province = document.getElementById("province");
                // 更改area选项时，清空上次列表
                province.options.length = 1;
                // 获取area编号
                for (var j = 0; j < provinces[areaIn].length; j++) {
                    var op = new Option(provinces[areaIn][j], j);
                    // 将新创建的选项对象添加
                    province.options.add(op);
                }
            }
        }
    </script>

</head>
<body>
<select id="area">
    <option value="">--Area Option--</option>
</select>
<select id="province">
    <option value="">--Province Option--</option>
</select>
</body>
</html>
模块》》》》》JS实现“地区-》省”（英文）选择

效果图：

实现

猜你喜欢
