[轉]html 下拉框級聯

本文轉載自查看原文 2017-09-03 00:42 3639

<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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery+html三級聯動下拉框 jeesite級聯下拉框 EasyUI下拉框級聯 bootstrap 多級聯動下拉框 layui下拉框實現級聯用AJAX做下拉框級聯 jQuery下拉框級聯實現下拉框的二級聯動 Axure下拉框級聯操作 EasyUI樹形下拉框級聯