省市县三级联动 简易版

国内省市县地址三级联动。

地址数据存放在多维数组中，加载页面时自动载入省一级的选项，对任意选框进行选择操作后自动填充其后续select选框的所有选项option，并以第一项为默认选中项。

 

 页面加载后选框效果如下:

 

 选择第一项后自动填充后续项:

 

<--! HTML -->
<div class="container">
    <span class="address">
        <label for="province">省/直辖市:</label>
        <select name="province" id="province" class="province"></select>
    </span>
    <span class="address">
        <label for="city">市:</label>
        <select name="city" id="city" class="city"></select>
    </span>
    <span class="address">
        <label for="district">县/区:</label>
        <select name="district" id="district" class="district"></select>
    </span>
</div>

 

/* JS */
    var _selects = document.getElementsByTagName('select'),
        address = ADDRESS_CODES,
        _noticeOption = new Option('--请选择--');
    
    /* 填充选项 */
    function fill(_select, addr) {
        _select.length = 0; // 清空选框中原先的option选项
        for (var i = 0, len = addr.length; i < len; i++) {
            _select.add(new Option(addr[i][1], addr[i][0]));
        }
    }
    
    /* 填充省份 */
    fill(_selects[0], address);
    _noticeOption.disabled=true;
    _selects[0].add(_noticeOption);
    _selects[0].selectedIndex = _selects[0].length - 1;
    
    /* 选择省份继而填充市、区 */
    _selects[0].onchange = function () {
        var i = _selects[0].selectedIndex;
        fill(_selects[1], address[i][2]); // 填充该省下辖的市
        fill(_selects[2], address[i][2][0][2]); // 填充该省的第一个市下辖的区
    }
    
    /* 选择市继而填充区 */
    _selects[1].onchange = function () {
        var i = _selects[0].selectedIndex,
            j = _selects[1].selectedIndex;
        fill(_selects[2], address[i][2][j][2]); // 填充该市下辖的区
    }

 

 

每一个平级的地址都独自放在一个数组的数组里，因此1级地址就得存放在2维数组里，这里是3级地址因此存放在6维数组里。

/* 部份地址 */
var ADDRESS_CODES = [
    [
        "110000",
        "北京",
        [
            [
                "110100",
                "北京市",
                [
                    [
                        "110101",
                        "东城区"
                    ],
                    [
                        "110102",
                        "西城区"
                    ],
                    [
                        "110103",
                        "崇文区"
                    ],
                    [
                        "110104",
                        "宣武区"
                    ],
                    [
                        "110105",
                        "朝阳区"
                    ]
                ]
            ]
        ]
    ],
    [
        "130000",
        "河北省",
        [
            [
                "130100",
                "石家庄市",
                [
                    [
                        "130102",
                        "长安区"
                    ],
                    [
                        "130103",
                        "桥东区"
                    ],
                    [
                        "130104",
                        "桥西区"
                    ],
                    [
                        "130105",
                        "新华区"
                    ],
                    [
                        "130107",
                        "井陉矿区"
                    ]
                
                ]
            ],
            [
                "130200",
                "唐山市",
                [
                    [
                        "130202",
                        "路南区"
                    ],
                    [
                        "130203",
                        "路北区"
                    ],
                    [
                        "130204",
                        "古冶区"
                    ]
                
                ]
            ]
        ]
    ]
]