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>