省市县三级联动

来源：互联网发布：淘宝虚拟物品有哪些编辑：程序博客网时间：2024/04/28 04:50

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="loadAreas.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="Province" name="Province" class="select" style="width: 100px;">
        </select>省(自治区、直辖市)  
        <select id="City" name="City" class="select">
        </select>市  
        <select id="District" name="District" class="select">
        </select>区(县、县级市)  
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    var province = document.getElementById("Province");
    var city = document.getElementById("City");
    var district = document.getElementById("District");

    function loadProvince(value) {
        province.options.length = 0;
        for (var i in areas) {
            var area = areas[i];
            if (area[0] == "0")
                province.options.add(new Option(area[2], area[2]));
        }
        if (value)
            province.value = value;
    }

    function loadCity(value) {
        city.options.length = 0;
        for (var i in areas) {
            var area = areas[i];
            if (area[0] == province.value)
                city.options.add(new Option(area[2], area[2]));
        }
        if (value)
            city.value = value;
    }

    function loadDistrict(value) {
        district.options.length = 0;
        for (var i in areas) {
            var area = areas[i];
            if (area[0] == city.value)
                district.options.add(new Option(area[2], area[2]));
        }
        if (value)
            district.value = value;
    }

$(function () {
$("#Province").change(function () { loadCity(); loadDistrict(); });

$("#City").change(function () { loadDistrict(); });

        loadProvince("@tmpModel.Province");
        loadCity("@tmpModel.City");
        loadDistrict("@tmpModel.District");

});
</script>