[转]html 下拉框级联

HTML多级联动下拉框

最新推荐文章于 2022-08-07 19:06:15 发布

转载最新推荐文章于 2022-08-07 19:06:15 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/z5337/p/7468535.html

文章标签：

#javascript #java #ViewUI

本文介绍了一个使用HTML和JavaScript实现的多级数据联动下拉框系统。该系统通过预定义的数据集实现了省份、城市及区域的级联选择功能，并借助jQuery简化了DOM操作。

<html>
<head>
    <title>html 下拉框级联</title>
    <meta charset="UTF-8"/>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .change {
            width: 800px;
            border: 1px solid red;
            margin: 50px auto;
            text-align: center;
        }

    </style>
</head>
<body>
<h1 style="text-align:center;"> java 开发多级数据联动系统 - Amy 老师 </h1>
<div class="change">欢迎同学来到谭州学院试听课程！！！<br/>
    <div style="text-align:center;margin:10px auto;">省份：
        <select style="width:150px;height:23px;line-height:30px;" id="province" onchange="city_change(this)">
        </select>
    </div>
    <div style="text-align:center;margin:10px auto;">城市：
        <select style="width:150px;height:23px;line-height:30px;" id="city" onchange="area_change(this)">
        </select>
    </div>
    <div style="text-align:center;margin:10px auto;">区域：
        <select style="width:150px;height:23px;line-height:30px;" id="area">
        </select>
    </div>
</div>

<script type="text/javascript" src="/Script/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    var datas = {
        province: [{
            "id": 1001,
            "name": "湖南省"
        }, {
            "id": 1002,
            "name": "黑龙江省"
        }],
        city: {
            "1001": "100101#长沙市,100102#郴州市",
            "1002": "100201#哈尔滨市,100202#黑河市"
        },
        area: {
            "100101": "10010101#芙蓉区,100101#雨花区",
            "100102": "10010201#长沙区,100102#郴州区",
            "100201": "10020101#南岗区,10020102#大理区",
            "100202": "10020201#哈尔滨区,10020202#黑河区"
        }
    }
    $(function () {
        init_province(); // 初始化省份数据
        
    })
    
    function init_province() {
        $("#city").empty()
        $("#area").empty()
        $("#province").append("<option>----请选择省份----</option>");
        var provinceArr = datas.province;   // 得到省份数组
        for(var i=0;i<provinceArr.length;i++){
            $("#province").append("<option value='" + provinceArr[i].id + "'>"+ provinceArr[i].name +"</option>");
        }
    }

    function city_change(obj) {
        $("#city").empty()
        $("#area").empty()
        var value=obj.value;    // 获取选中的省份
        // 根据省份的 id，找到对应的城市
        var cityDates = datas["city"][value];
        // 解析城市数据
        var citys = cityDates.split(",");
        // 添加 默认选项
        $("#city").append("<option>---请选择市---</option>");
        // 遍历数据对象
        for(var i =0;i<citys.length;i++){
            var v = citys[i].split("#");
            var cityId = v[0];
            var cityName = v[1];
            $("#city").append("<option value='" + cityId + "'>"+ cityName +"</option>");
        }
    }

    function area_change(obj) {
        $("#area").empty()
        var value=obj.value;    // 获取选中的省份
        // 根据省份的 id，找到对应的城市
        var areaDates = datas["area"][value];
        // 解析城市数据
        var areas = areaDates.split(",");
        $("#area").empty()
        // 添加 默认选项
        $("#area").append("<option>---请选择市---</option>");
        // 遍历数据对象
        for(var i =0;i<areas.length;i++){
            var v = areas[i].split("#");
            var areaId = v[0];
            var areaName = v[1];
            $("#area").append("<option value='" + areaId + "'>"+ areaName +"</option>");
        }
    }
</script>
</body>
</html>