Jquery 带有复选框的多个下拉列表

我创建了一个多选下拉列表，用户通过单击每个选项的复选框来选择选项。它只适用于一个这样的下拉列表，但我需要在一个页面上有很多这样的内容。有人知道如何更改代码来实现这一点吗

这是这个的密码笔。下面，我还添加了代码笔中的html/css/jquery

$（“.dropdown container”）
.on（'单击'，''。下拉按钮'，函数（）{
$（this）.sides（'.dropdownlist'）.toggle（）；
})
.on（'输入'，''。下拉搜索'，函数（）{
var目标=$（此）；
var dropdownList=target.closest（'.dropdownList'）；
var search=target.val（）.toLowerCase（）；
如果（！搜索）{
dropdownList.find（'li'）.show（）；
返回false；
}
dropdownList.find（'li'）。每个（函数（）{
var text=$（this.text（）.toLowerCase（）；
var match=text.indexOf（search）>-1；
$（此）.toggle（匹配）；
});
})
$（'.下拉列表输入[type=“checkbox”]'）。在（'click'，函数（）{
var title=$（this）.closest（'.dropdown list'）.find（'input[type=“checkbox”]'））.val（），
title=$（this.val（）+“，”；
如果（$（this）.is（':checked'））{
var html=''+title+''；
$（'.quantity'）.append（html）；
$（“.hida”）.hide（）；
} 
否则{
$（'span[title=“”+title+“]”）。删除（）；
var ret=$（“.hida”）；
$（'.dropdown dt a'）.append（ret）；
}
});
。下拉按钮{
宽度：100%；
背景：白色；
光标：指针；
填充：19px；
框大小：边框框；
边框：1px实心；
}
.下拉标签，.下拉数量{
浮动：左；
字体系列：“Ubuntu”，无衬线；
}
.下拉数量{
左边距：4倍；
}
输入[type=“search”]{
填充物：5px；
宽度：100%；
利润率：3px08px；
}
.下拉列表{
保证金：0；
溢出y：自动；
边框底部：1px实心#d5d5；
左边框：1px实心#d5d5；
右边框：1px实心#d5d5；
边框顶部：1px实心#d5d5；
z指数：999999；
位置：绝对位置；
填充：10px；
背景：白色；
顶部：67px；
宽度：97.5%；
左：9px；
}
.下拉式容器ul{
保证金：0；
填充：0；
}
.dropdown容器ul li{列表样式类型：无；}
输入[type=“checkbox”]{
位置：相对位置；
顶部：2个；
}

各国*
▼

阿拉巴马州
阿拉斯加
美属萨摩亚
亚利桑那州
阿肯色州
加利福尼亚州
科罗拉多州
康涅狄格州

关于标记和样式


在未引用FormActionElement的情况下，不应使用像Hello world这样的标签
将复选框和标签文本包装到
中，以便两者都可以单击
使用
处于活动状态
和
处于隐藏状态
CSS类来描述状态
为箭头使用
：：before
pseudo with
content:
，并使用
处于活动状态
（分配给组件下拉列表）来处理箭头状态
当为同一目的名称使用多个复选框时，请使用类似于
name=“states[]”
的名称属性，以便可以捕获
states
数组中的所有选定值
使用
data-*
属性，如
data name=“Long name”
来存储预览名称
使用CSS
flex
而不是
float
s
如果您计划将子对象设置为绝对对象，请始终将父对象设置为相对对象（如
relative
）

关于JavaScript的问题


通过使用jQuery的
.each（）
像
$dropdown.each（UI_dropdown）；/，创建一个函数来处理所有自定义下拉列表将逻辑应用于所有下拉列表
而在该函数中，始终引用子元素作为
此
下拉列表的子集，如
$（'.dropdown button'，this）
以防止将每个
作为目标。下拉按钮“
位于DOM中
确保将处理程序添加到
文档中
以关闭活动下拉列表
如果打开了另一个下拉列表，请确保关闭该下拉列表：


const$dropdown=$（'.dropdown container'）；//缓存所有；
函数UI_下拉列表（）{
const$this=$（this）；
常量$btn=$（'.dropdown button'，this）；
const$list=$（'.dropdownlist'，this）；
const$li=$（'li'，this）；
const$search=$（'.dropdown search'，this）；
常量$ckb=$（':checkbox'，this）；
常量$qty=$（“.下拉数量”，此项）；
$btn.on（'单击'，函数（））{
$dropdown.not（$this.removeClass（'is-active'）；//关闭其他
$this.toggleClass（'is-active'）；//切换此
});
$search.on（'input'，function（）{
const val=$（this.val（）.trim（）；
const rgx=新的RegExp（val，'i'）；
$li.每个（函数（）{
常量名称=$（this.text（）.trim（）；
$（this.toggleClass（'is-hidden'，！rgx.test（name））；
});
});
$ckb.on（'change'，function（）{
常量名称=$ckb.get（）.filter（el=>el.checked）.map（el=>{
返回`${el.dataset.name.trim（）}`；
});
$qty.html（name.join（“”））；
});
}
$dropdown.each（UI_dropdown）；//将逻辑应用于所有下拉列表
//下拉列表-