二级联动..

最新推荐文章于 2024-06-16 18:09:06 发布

微笑、不失礼471

最新推荐文章于 2024-06-16 18:09:06 发布

阅读量49

点赞数

文章标签： javascript 前端 html html5

本文链接：https://blog.csdn.net/weixin_55711841/article/details/125922157

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<label for="fenlei">商品分类</label>
<select id="fenlei">
<option value="0">请选择分类</option>

</select>

<label for="detail">商品子类</label>
<select id="detail">
<option value="0">请选择子分类</option>
</select>

<div>
你选择的商品是:
<span id="result"></span>
</div>

</div>
<script>
var data = [
{
id:1,
name:"服务",
detail:[
{id:101,name:"七天免费退货"},
{id:102,name:"30天免费维修"},
{id:103,name:"终身免费试用"},
]
},

{
id:2,
name:"电脑分类",
detail:[
{id:111,name:"鸿基电脑"},
{id:112,name:"联想电脑"},
{id:113,name:"苹果电脑"},
]
},
{
id:3,
name:"数码产品",
detail:[
{id:121,name:"索尼相机"},
{id:122,name:"VR眼镜"}
]
}
]
// 1 获取分类select和detailselect标签
var fenleiselect = document.querySelector("#fenlei")
var detailselect = document.querySelector("#detail")

// 获取result标签
var result = document.querySelector("#result")

// 2渲染分类的select

for(let i = 0;i<data.length;i++){
// createElement("标签名") 1创建标签，
const option = document.createElement("option")
option.value = data[i].id // 给option标签添加value属性，设置值为分类的id
option.text = data[i].name //text可以给option添加标签内容
// 2追加标签，appendChild ()把元素添加到父标签下
fenleiselect.appendChild(option)
}

// 3 给分类select绑定事件目的是为了确定第二个select的数据源
fenleiselect.addEventListener('change',function(){
// 获取分类select目前选中的option
// selectedOptions[0].value 获取选中option的value值
console.log(fenleiselect.selectedOptions[0].value)// 获取选中option的value值 0 1 2 3
var value = fenleiselect.selectedOptions[0].value

if(value!=0){
// 取出具体商品的数据源
// filter()过滤把满足条件的元素过滤到一个新数组里面
var array = data.filter(function(v,i,a){
return v.id==value
})
console.log(array)

// 第二个select的数据源
var detailArray = array[0].detail
var html ="<option value='0'>请选择子分类</option>"
for(let i =0;i<detailArray.length;i++){
html+=`<option value=${detailArray[i].id}>${detailArray[i].name}</option>`
}
detailselect.innerHTML = html
result.textContent= fenleiselect.selectedOptions[0].text
}else{
result.textContent=""
}

},false)

// 给第二个select绑定事件
detailselect.addEventListener('change',function(){
// result.textContent 标签的文本内容
// fenleiselect.selectedOptions[0].text 第一个select标签选中的文本
// detailselect.selectedOptions[0].text 第二个select标签选中的文本
result.textContent = fenleiselect.selectedOptions[0].text + detailselect.selectedOptions[0].text
},false)

</script>
</body>
</html>