简单的一个三级联动，望朋友们多多指点

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带连字符的属性转换为驼峰命名

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注