JavaScript实现二级联动下拉框

来源:互联网 发布:禁止在淘宝网上发布 编辑:程序博客网 时间:2024/05/18 02:47

网上经常存在地址联动的案例,今天发现这个用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>