jq实现简单的二级联动下拉框

时间：2019-10-13 12:58:18 阅读：74 评论：0 收藏：0 [点我收藏+]

1 效果图

技术图片

2 html

<!DOCTYPE html>

<head>

<title>二级联动下拉框</title>

</head>

<body>

<div>

</select>

</div>

</select>

</div>

</body>

</html>

3 jq

$(function(){

var arr1 = [‘食材‘,‘家居‘,‘电子产品‘];

var arr2 = [[‘蔬菜‘,‘水果‘,‘调料‘],[‘沙发‘,‘电池炉‘,‘冰箱‘],[‘电脑‘,‘手机‘,‘充电宝‘]];

for(let i=0;i<arr1.length;i++){

$(‘#select-1‘).append(‘<option>‘+arr1[i]+‘</option>‘);

}

$(‘#select-1‘).change(function(){

$(‘#select-2‘).children().not(‘:eq(0)‘).remove();

var index = $(this).children(‘option:selected‘).index();

var arr = arr2[index-1];

for(let i=0;i<arr.length;i++){

$(‘#select-2‘).append(‘<option>‘+arr[i]+‘</option>‘);

}

})

4 总结

,children();//获取当前选中元素的一级子元素

.change();//绑定元素改变的处理函数

.not();//从选中集合中剔除选中的元素，not里面放筛选条件

原文地址：https://www.cnblogs.com/Zxq-zn/p/11663052.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行