json+jquery 三级联动

最新推荐文章于 2017-05-19 00:23:01 发布

xiaonian8

最新推荐文章于 2017-05-19 00:23:01 发布

阅读量836

点赞数

分类专栏：前端文章标签： json+jquery 三级联动

本文链接：https://blog.csdn.net/xiaonian8/article/details/19872209

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script src="js/jquery-1.8.0.js" type="text/javascript"></script>
    <script>
         //json数据
        var a = '{"city":[{"cityname":"北京","cityarea":[{"area1":"朝阳区","area2":[{"area3":"国贸中心"},{"area3":"世茂中心"},{"area3":"远大中心"},{"area3":"酒仙桥中心"},{"area3":"望京中心"}]},{"area1":"海淀区","area2":[{"area3":"上地中心"},{"area3":"中关村中心"},{"area3":"公主坟中心"},{"area3":"清华科技园中心"},{"area3":"欧美汇中心"}]},{"area1":"东城区","area2":[{"area3":"崇文门中心"},{"area3":"东方广场中心"},{"area3":"东方银座中心"}]},{"area1":"西城区","area2":[{"area3":"远洋中心"},{"area3":"西直门凯德MALL中心"}]},{"area1":"丰台区","area2":[{"area3":"首地中心"}]}]},{"cityname":"上海","cityarea":[{"area1":"浦东新区","area2":[{"area3":"金茂中心"},{"area3":"上海湾中心"},{"area3":"正大广场中心"}]},{"area1":"静安区","area2":[{"area3":"梅龙镇广场中心"},{"area3":"静安寺中心"}]},{"area1":"卢湾区","area2":[{"area3":"新天地中心"},{"area3":"打浦桥中心"}]},{"area1":"徐汇区","area2":[{"area3":"徐家汇中心"},{"area3":"南丹路中心"},{"area3":"宜山路中心"}]},{"area1":"长宁区","area2":[{"area3":"虹桥中心"},{"area3":"中山公园中心"}]},{"area1":"黄浦区","area2":[{"area3":"人民广场中心"}]},{"area1":"杨浦区","area2":[{"area3":"五角场中心"}]},{"area1":"虹口区","area2":[{"area3":"虹口中心"}]},{"area1":"闵行区","area2":[{"area3":"莘庄中心"}]},{"area1":"普陀区","area2":[{"area3":"武宁路中心"}]}]},{"cityname":"深圳","cityarea":[{"area1":"罗湖区","area2":[{"area3":"金光华中心"}]},{"area1":"福田区","area2":[{"area3":"科学馆中心"},{"area3":"华强北中心"},{"area3":"CBD中心"},{"area3":"车公庙中心"}]},{"area1":"南山区","area2":[{"area3":"世界之窗中心"},{"area3":"海岸城中心"},{"area3":"太古城中心"}]}]},{"cityname":"杭州","cityarea":[{"area1":"上城区","area2":[{"area3":"延安路中心"}]},{"area1":"下城区","area2":[{"area3":"武林广场中心"},{"area3":"庆春路中心"}]},{"area1":"拱墅区","area2":[{"area3":"湖墅路中心"}]}]},{"cityname":"广州","cityarea":[{"area1":"天河区","area2":[{"area3":"天河财富广场中心"},{"area3":"体育西中心"},{"area3":"天河北中心"},{"area3":"珠江新城中心"}]},{"area1":"越秀区","area2":[{"area3":"荣建中心"},{"area3":"公园前中心"}]},{"area1":"海珠区","area2":[{"area3":"海珠中心"}]},{"area1":"荔湾区","area2":[{"area3":"荔湾中心"}]},{"area1":"番禺区","area2":[{"area3":"番禺中心"}]}]},{"cityname":"天津","cityarea":[{"area1":"和平区","area2":[{"area3":"国际商场中心"},{"area3":"友谊精品广场中心"}]},{"area1":"南开区","area2":[{"area3":"新安购物广场中心"},{"area3":"奥城中心"}]},{"area1":"塘沽区","area2":[{"area3":"塘沽中心"}]}]},{"cityname":"青岛","cityarea":[{"area1":"市南区","area2":[{"area3":"中环广场中心"},{"area3":"黄金广场中心"}]}]},{"cityname":"南京","cityarea":[{"area1":"白下区","area2":[{"area3":"新街口中心"},{"area3":"上海路中心"}]}]},{"cityname":"苏州","cityarea":[{"area1":"姑苏区","area2":[{"area3":"观前街中心"}]}]},{"cityname":"无锡","cityarea":[{"area1":"崇安区","area2":[{"area3":"崇安寺中心"}]}]},{"cityname":"佛山","cityarea":[{"area1":"禅城区","area2":[{"area3":"东方广场中心"}]}]}]}';
        //alert(a);
        var obj = eval('(' + a + ')');//格式化
        var citylen = obj.city.length;
        var ci = "";
        for (var i = 0; i < citylen; i++) {

            ci = ci + "<option value='" + i + "'>" +i+ obj.city[i].cityname + "</option>";

            var area1len = obj.city[i].cityarea.length;

            for (var j = 0; j < area1len; j++) {
              // document.write("</br>区:" + obj.city[i].cityarea[j].area1 + "最近中心:</br>");
                var area2len = obj.city[i].cityarea[j].area2.length;
                for (var m = 0; m < area2len; m++) {
                   // document.write(obj.city[i].cityarea[j].area2[m].area3 + " ");
                }
            }
        }

        $(function() {
            $("#city").append(ci);
            $("#city").change(function() {
                $("#area").html("<option>选择区</option>");
                $("#area1").html("<option>选择中心</option>");
                var cen = "";
                var thisleng = $(this).val();
                var area1len = obj.city[thisleng].cityarea.length;

                for (var j = 0; j < area1len; j++) {
                    cen = cen + "<option value='" + j + "'>" + obj.city[thisleng].cityarea[j].area1 + "</option>";
                }
                $("#area").append(cen);
            });

            $("#area").change(function() {
                $("#area1").html("<option>选择中心</option>");
                var cen = "";
                var parleng = $("#city").val();
                var thisleng = $(this).val();
                var area1len = obj.city[parleng].cityarea[thisleng].area2.length;
                for (var j = 0; j < area1len; j++) {
                    cen = cen + "<option value='" + j + "'>"+ obj.city[parleng].cityarea[thisleng].area2[j].area3 + "</option>";
                }
                $("#area1").append(cen);
            });
            $("#onclick").click(function() {
            alert($("#city option:selected").text() + $("#area option:selected").text() + $("#area1 option:selected").text());

            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        市：
        <select id="city">
           <option>选择城市</option>
        </select>
       区: <select id="area">
            <option>选择区</option>
        </select>
        中心:<select id="area1">
            <option>选择中心</option>
        </select>

    </div>
    <input type="button" value="dd" id="onclick"/>
    </form>
</body>
</html>

xiaonian8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
json+jquery 三级联动

无标题页 //json数据 var a = '{"city":[{"cityname":"北京","cityarea":[{"area1":"朝阳区","area2":[{"area3":"国贸中心"},{"area3":"世茂中心"},{"area3":"远大中心"},{"area3":"酒仙桥中心"},{"area3":"望京中心"
复制链接

扫一扫