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

最新推荐文章于 2019-03-05 17:02:17 发布

西西西小崽

最新推荐文章于 2019-03-05 17:02:17 发布

阅读量275

点赞数 1

分类专栏： html5 文章标签：新手

本文链接：https://blog.csdn.net/xixixixiaozai/article/details/54933807

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>三级联动</title>
</head>

<body οnlοad="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));
}
//默认选中0
select1.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的xuanzhong
select2.οnchange=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>