JQuery中的省市联动

浏览数：26 / 时间：2015年06月09日

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>列表框中事件应用</title>
 6     <script src="jquery-2.1.0.js"></script>
 7     <style type="text/css">
 8         body {
 9             font-size:13px;
10         }
11         .clsInit {
12             width:435px;
13             height:35px;
14             line-height:35px;
15             padding-left:10px;
16         }
17         .clsTip {
18             padding-top:5px;
19             background-color:#00ffff;
20             display:none;
21         }
22         .btn {
23             border: 1px solid #666;
24             padding: 2px;
25             width: 65px;
26             float: right;
27             margin-top: 6px;
28             margin-right: 5px;
29             filter: progid:DxImageTransForm.Microsoft.Oradient(GradientType=0,StartColorStr=#fffff,EndColorStr=#ECE9D8);
30         }
31 
32     </style>
33     <script type="text/javascript">
34         $(function () {
35             function objInt(obj) {
36                 return $(obj).html("<option>请选择</option>");
37             }
38             var arrData = {
39                 厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
40                 厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2-1,型号2_2_2" },
41                 厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3-2-1,型号3_2_2" },
42             };
43             $.each(arrData, function (pF) {
44                 $("#sleF").append("<option>" + pF + "</option>");
45             });
46             $("#sleF").change(function () {
47                 objInt("#sleT");
48                 objInt("#sleC");
49                 $.each(arrData, function (pF, pS) {
50                     if ($("#sleF option:selected").text() == pF) {
51                         $.each(pS, function (pT, pC) {
52                             $("#sleT").append("<option>" + pT + "</option>");
53                         });
54                         $("#sleT").change(function () {
55                             objInt("#sleC");
56                             $.each(pS, function (pT, pC) {
57                                 if ($("#sleT option:selected").text() == pT) {
58                                     $.each(pC.split(","), function () {
59                                         $("#sleC").append("<option>" + this + "</option>");
60                                     });
61                                 }
62                             });
63                         });
64                     }
65                 });
66             });
67             $("#Button1").click(function () {
68                 var strValue = "你选择的：";
69                 strValue += $("#sleF option:selected").text();
70                 strValue += "你的品牌为：";
71                 strValue += $("#sleT option:selected").text();
72                 strValue += "你的型号为：";
73                 strValue += $("#sleC option:selected").text();
74                 $("#divTip").show().addClass("clsTip").html(strValue);
75             });
76         })
77     </script>
78 </head>
79 <body>
80     <div class="clsInit">
81         厂商:<select id="sleF"><option>请选择</option></select>
82         品牌:<select id="sleT"><option>请选择</option></select>
83         型号:<select id="sleC"><option>请选择</option></select>
84         <input id="Button1" type="button" value="查询" class="btn" />
85     </div>
86     <div class="clsInit" id="divTip"></div>
87 </body>
88 </html>