1. 程式人生 > >下拉列表級聯的小demo

下拉列表級聯的小demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script type="text/javascript">
    var shengArr = new Array();
    shengArr["廣東"] = ["廣州", "深圳", "珠海", "汕頭", "韶關"];
    shengArr["湖南"] = ["長沙", "張家界", "株洲", "懷化", "常德"];
    shengArr["湖北"] = ["武漢", "荊州", "宜昌", "黃岡", "仙桃"];
    shengArr["安徽"] = ["合肥", "黃山"];
    shengArr["河南"] = ["鄭州", "信陽", "洛陽"];

    function getSheng() {
        var s = document.getElementById("sheng");

        for (var v in shengArr) {
            s.add(new Option(v, v), null);
        }
    }

    function getCity() {
        var s = document.getElementById("sheng");
        var c = document.getElementById("city");
        var v = s.value;
        c.options.length = 0;

        for (var i in shengArr[v]) {
            c.add(new Option(shengArr[v][i], shengArr[v][i]), null);
        }
    }
</script>

<!--頁面載入時獲取 省名-->

<body onload="getSheng()">

    <!-- 改變省時匹配該省的城市名-->
    省:
    <select id="sheng" onchange="getCity()">
        <option>--請選擇</option>
    </select>
    市:
    <select id="city"></select>
</body>

</html>