簡單的一個三級聯動，望朋友們多多指點

2024-04-27 15:15:52

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html><html><head><meta charset="utf-8"><title>三級聯動</title></head><body onload="init()"><select id="first"></select><select id="second"></select><select id="third"></select><script>var arr1 = ["家用電器", "護膚", "服裝", "鞋包"];var arr2 = [["電視", "空調", "洗衣機", "冰箱"],["洗面奶", "面膜", "乳液", "爽膚水"],["男裝", "女裝", "童裝", "配飾"],["運動鞋", "皮鞋", "帆布鞋", "拖鞋"]];var arr3 = [[["液晶電視", "老式電視"],["立式空調", "掛式空調"],["全自動", "半自動"],["制冷", "保鮮"]],[["男士", "女士"],["超薄", "增濕"],["防干燥", "瘦臉"],["清爽","去污"]],[["牛仔褲","西服"],["連體裙","晚礼服"],["卡通裝","小浣熊"],["項鏈","手表"]],[["耐克","阿迪達斯"],["老船長","鱷魚皮"],["韓式","中式"],["人字拖","大拖鞋"]]];function init() {var select1 = document.getElementById("first");var select2 = document.getElementById("second");var select3=document.getElementById("third");//數據填充for (var i = 0; i < arr1.length; i++) {select1.options.add(new Option(arr1[i], i));}for (var i = 0; i < arr2[0].length; i++) {select2.options.add(new Option(arr2[0][i], i));}for(var i=0;i<arr3[0][0].length;i++){select3.options.add(new Option(arr3[0][0][i],i));}//默認選中0select1.options[0].selected = "selected";//設置select1選中時的事件select1.onchange = function() {var x = this.value;//清空操作，不然會向后面追加select2.options.length = 0;select3.options.length=0;//數據添加for (var i = 0; i < arr2[x].length; i++) {select2.options.add(new Option(arr2[x][i], i));}for(var i=0;i<arr3[x][1].length;i++){select3.options.add(new Option(arr3[x][i][i],i));}}//設置select2的xuanzhongselect2.onchange=function(){//拿到第一個select的value去確定所在的數組var x=document.getElementById("first").value;var y=this.value;select3.options.length=0;for(var i=0;i<arr3[i][y].length;i++){select3.options.add(new Option(arr3[x][y][i],i));}}}</script></body></html>

上一篇：【前端面試】HTML5+CSS3初級面試2

下一篇：用PHP把html帶連字符的屬性轉換為駝峰命名