JQuery中的省市聯動

時間 2019-12-05
標籤 jquery 省市聯動欄目 JQuery 简体版
原文原文鏈接
 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>
View Code
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。