JavaScript实现二级联动下拉框

网上经常存在地址联动的案例，今天发现这个用js写的还蛮简单的，记录下

html代码段
<select id="province" onchange="changeCity(this.value)">
    <option value="0">----请选择省份----</option>
    <option value="1">山西省</option>
    <option value="2">陕西省</option>
    <option value="3">四川省</option>
    <option value="4">浙江省</option>
</select>
<select id="city">
    <option value="">----请选择城市----</option>
</select>

js代码段
<script>
    function $(id){
        return document.getElementById(id);
    }
    var arrCity = [
                ["----请选择城市----"],
                ["太原市","大同市","朔州市","运城市"],
                ["西安市","韩城市","咸阳市","临潼市"],
                ["成都市","绵阳市","攀枝花","广元市"],
                ["杭州市","温州市","丽水市","金华市"]
    ];

    function changeCity(index) {
        var citys = arrCity[index];
        var city = $("city");
        city.length = 0;
        for (var i = 0; i < citys.length; i++) {
            var opt = document.createElement("option");
            opt.innerHTML = citys[i];
            city.appendChild(opt);
        }
    }
</script>