原生js实现多级联动效果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>原生js联动效果</title>
 6         <style>
 7             * {
 8                 margin: 0;
 9                 padding: 0;
10             }
11             .wrap {
12                 width: 400px;
13                 margin: 50px auto;
14             }
15             .wrap select {
16                 width: 100px;
17                 height: 28px;
18             }
19         </style>
20     </head>
21     <body>
22         <div class="wrap">
23             <select name="brand" id="brand" onchange="showModel()">
24                 <option value="brand">手机品牌</option>
25             </select>
26             <select name="model" id="model" onchange="showRam()">
27                 <option value="model">型号</option>
28             </select>
29             <select name="ram" id="ram">
30                 <option value="ram">内存</option>
31             </select>
32         </div>
33         <script>
34 //            定义数据
35             var data = [
36                 {
37                     "brand":"华为",
38                     "model":[{"name":"P8"},{"name":"P9"},{"name":"P10"},{"name":"P10Plus"}],
39                     "ram":[["8G","16G","32G","64G","128G"],["16G","32G","64G","128G"],["32G","64G","128G"],["64G","128G","256G"]]
40                 },
41                 {
42                     "brand":"iPhone",
43                     "model":[{"name":"iPhone6"},{"name":"iPhone6Plus"},{"name":"iPhone7"},{"name":"iPhone7Plus"},{"name":"iPhoneX"}],
44                     "ram":[["8G","16G","32G"],["16G","32G","64G"],["32G","64G","128G"],["64G","128G","256G"],["64G","128G","256G","512G"]]
45                 },
46                 {
47                     "brand":"小米",
48                     "model":[{"name":"M4"},{"name":"M5"},{"name":"M6"}],
49                     "ram":[["8G","16G"],["32G","64G"],["64G","128G","256G"]]
50                 }
51             ];
52 //            获取对应id
53             var oBrand = document.getElementById("brand");
54             var oModel = document.getElementById("model");
55             var oRam = document.getElementById("ram");
56 //            定义两个变量,存放value值
57             var indexFirst = 0,indexSecond = 0;
58 //            初始化遍历brand
59             for(var i = 0;i < data.length;i++){
60                 var option = document.createElement("option");
61                 option.innerHTML = data[i].brand;
62                 option.value = i;
63                 oBrand.appendChild(option);
64             };
65 //            显示型号函数,遍历model
66             function showModel(){
67                 indexFirst = oBrand.value;
68 //                清空后续select
69                 oModel.options.length = 1;
70                 oRam.options.length = 1;
71                 if(indexFirst == "brand"){
72 //                    避免点击首个option报错问题
73                 }else{
74                     for(var i = 0;i < data[indexFirst].model.length;i++){
75                         var option = document.createElement("option");
76                         option.innerHTML = data[indexFirst].model[i].name;
77                         option.value = i;
78                         oModel.appendChild(option);
79                     }
80                 }
81             };
82 //            显示内存函数,遍历ram
83             function showRam(){
84                 indexSecond = oModel.value;
85                 oRam.options.length = 1;
86                 if(indexSecond == "model"){
87 //                    避免点击首个option报错问题
88                 }else{
89                     for(var i = 0;i < data[indexFirst].ram[indexSecond].length;i++){
90                         var option = document.createElement("option");
91                         option.innerHTML = data[indexFirst].ram[indexSecond][i];
92                         option.value = i;
93                         oRam.appendChild(option);
94                     }
95                 }
96             }
97         </script>
98     </body>
99 </html>
posted on 2017-11-06 22:04 邂逅在人海阅读(232) 评论(0) 收藏举报