下拉列表级联的小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>

 

猜你喜欢

转载自blog.csdn.net/qq_36072384/article/details/81290451