jQuery實現select三級聯動

時間  2019-11-08
標籤 jquery 實現 select 三級 聯動 欄目 JQuery 简体版
原文   原文鏈接

參考：jQuery權威指南
jQuery初步
jQuery選擇器
jQuery操做dom
jQuery操做dom事件
jQuery插件
jQuery操做Ajax
jQuery動畫與特效
jQuery實現導航欄
jQuery實現點擊式選項卡
jQuery實現select三級聯動
javascript

效果css



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
     < style type = "text/css" >
     body{
         font-size: 13px;
     }
     .clsInit{
         width: 450px;
         height: 35px;
         line-height: 35px;
         padding-left: 10px;
     }
     .clsTip{
         padding-top: 5px;
         background-color: #eee;
         display: none;
     }
     .btn{
         border: 1px solid #666;
         padding: 2px;
         width: 65px;
         float: right;
         margin-top: 6px;
         margin-right: 6px;     
     }
     </ style >
< script type = "text/javascript" src = "jquery-1.4.4.js" ></ script >
< script type = "text/javascript" >
     $(function(){
         function objInit(obj){
             return $(obj).html("< option >請選擇</ option >");
         }
         var arrData = {
             廠商1:{品牌1_1: "型號1_1_1, 型號1_1_2", 品牌1_2: "型號1_2_1, 型號1_2_2"},
             廠商2:{品牌2_1: "型號2_1_1, 型號2_1_2", 品牌2_2: "型號2_2_1, 型號2_2_2"},
             廠商3:{品牌3_1: "型號3_1_1, 型號3_1_2", 品牌3_2: "型號3_2_1, 型號3_2_2"}
         };
   
         $.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 >');                      
                     });
   
                     //品牌列表change事件
                     $("#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;&nbsp;品牌：";
             strValue += $("#selT option:selected").text();
             strValue += "&nbsp;&nbsp;型號：";
             strValue += $("#selC option:selected").text();
             $("#divTip").show().addClass('clsTip').html(strValue);
         });
   
     });
</ script >
< title >jQuery實現select三級聯動</ title >
</ 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 >
</ body >
</ html >




相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程