45 jQuery-三级联动展示数据

1. 效果图

45 jQuery-三级联动展示数据-LMLPHP
2. html代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <title>45 jQuery-三级联动展示数据</title>
        <style type="text/css">
           body{font-size:13px}
           .clsInit{width:435px;height:35px;line-height:35px;padding-left:10px}
           .clsTip{padding-top:5px;background-color:#eee;
           display:none}
           .btn {border:#666 1px solid;padding:2px;width:65px;
           float:right;margin-top:6px;margin-right:6px;
           filter: progid:DXImageTransform.Microsoft.
           Gradient(GradientType=0,StartColorStr=#ffffff,
           EndColorStr=#ECE9D8);}
     </style>
</head>
<body>
 	 <div class="clsInit">
       省份：<select id="selF"><option>请选择</option></select>
       城市：<select id="selT"><option>请选择</option></select>
       区域：<select id="selC"><option>请选择</option></select>
       <input id="Button1" type="button" value="查询" class="btn" />
     </div>
     <div class="clsInit" id="divTip"></div>

<script src="../jquery.min.js"></script>
<script type="text/javascript">
       $(function() {
           function objInit(obj) {//下拉列表框初始化
               return $(obj).html("<option>请选择</option>");
           }
           var arrData = { //定义一个数组保存相关数据
		               北京市: { 北京市: "东城区,西城区,朝阳区" },
		               天津市: { 天津市: "和平区,河东区"},
		               河北省: {
			               唐山市: "路南区,路北区",
		                          承德市: "双桥区,双滦区" }
            };
            $.each(arrData, function(pF) { //遍历数据增加省份项
                $("#selF").append("<option>" + pF + "</option>");
            });

            $("#selF").change(function() { //省份列表框选项改变事件
                objInit("#selT");
                objInit("#selC");
                $.each(arrData, function(pF, pS) {
                   //如果省份选中项与数据匹配
                   if ($("#selF option:selected").text() == pF) {

                       //遍历数据增加城市项
                       $.each(pS, function(pT, pC) {
                           $("#selT").append("<option>" + pT +"</option>");
                       });
                       //城市列表框选项改变事件
                       $("#selT").change(function() {
                           objInit("#selC");
                           $.each(pS, function(pT, pC) {
                              //如果城市选中项与数据匹配
                              if ($("#selT option:selected").text() == pT) {
                                  //遍历数据增加区县项
                                  $.each(pC.split(","), function() {
                                      $("#selC").append("<option>"
                                      + this + "</option>");
                                  });
                               }
                           });
                        });
                      }
                   });
               });

               $("#Button1").click(function() { //注册按钮单击事件
                   var strValue = "您选择的省份是:";
                   strValue += $("#selF option:selected").text(); strValue += "&nbsp;您选择的城市:";
                   strValue += $("#selT option:selected").text(); strValue += "&nbsp;您选择的区县:";
                   strValue += $("#selC option:selected").text();
                   $("#divTip")
                   .show()
                   .addClass("clsTip")
                   .html(strValue);//显示提示信息并增加样式
                });

             })
              </script>
</body>
</html>
我是大都督

45 jQuery-三级联动展示数据

1. 效果图

2. html代码
