Javascript 如何在下拉列表中添加搜索功能
正如我们所知，有一个CSS脚本Select7下拉列表工具来自在线“”，只是想知道如何在这个下拉列表中添加搜索功能。 下面是HTML、CSS和JS的编码Javascript 如何在下拉列表中添加搜索功能,javascript,html,css,Javascript,Html,Css,正如我们所知，有一个CSS脚本Select7下拉列表工具来自在线“”，只是想知道如何在这个下拉列表中添加搜索功能。 下面是HTML、CSS和JS的编码 功能删除所选项目（元素，e）{ e、 停止传播（）； var option_text=elem.parentElement.querySelector（'.select7_content'）.innerHTML； var option_value=elem.parentElement.querySelector（'.select7_conten
功能删除所选项目（元素，e）{
e、 停止传播（）；
var option_text=elem.parentElement.querySelector（'.select7_content'）.innerHTML；
var option_value=elem.parentElement.querySelector（'.select7_content'）.dataset.optionValue；
变量选择器=elem.parentElement.parentElement.parentElement.querySelector（'.select7_select'）；
selector.innerHTML+=`${option_text}`；
如果（selector.length>1）
selector.style.display='block'；
var selected_items=elem.parentElement.parentElement.parentElement.querySelectorAll（'.select7_item'）；
如果（所选项目长度==1）{
变量占位符=elem.parentElement.parentElement.parentElement.querySelector（'.select7_占位符'）；
placeholder.style.display='block'；
}
elem.parentElement.remove（）；
}
功能添加所选项目（元素，e）{
e、 停止传播（）；
var option_text=elem[elem.selectedIndex].text；
var option_value=elem[elem.selectedIndex].value；
var selected_items=elem.parentElement.querySelector（'.select7_items'）；
var placeholder=elem.parentElement.querySelector（'.select7_placeholder'）；
placeholder.style.display='none'；
所选的\u items.innerHTML+=`
${option_text}
✖
`;
元素[elem.selectedIndex].remove（）；
如果（元素长度==1）
elem.style.display='none'；
}。选择7\u容器{
框大小：边框框；
位置：相对位置；
背景色：rgba（0,0,0,8）；
填充物：5px 5px 0 5px；
右侧填充：30px；
边界半径：5px；
溢出：隐藏；
颜色：rgb（255、255、255）；
宽度：100%；
最小高度：30px；
用户选择：无；
}
。选择7_占位符{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：粗体；
颜色：rgba（255、255、255、0.445）；
字体大小：14px；
位置：绝对位置；
最高：45%；
左：6px；
转化：translateY（-50%）；
}
。选择7_箭头{
位置：绝对位置；
右：10px；
垂直对齐：中间对齐；
字号：18px；
最高：50%；
转化：translateY（-50%）；
}
。选择7\u项{
位置：相对位置；
z指数：1；
显示：内联块；
背景色：rgba（255、255、255、0.8）；
颜色：rgb（0,0,0,9）；
填充物：2px4px；
边界半径：5px；
字体系列：Arial、Helvetica、无衬线字体；
字号：700；
字体大小：14px；
用户选择：无；
边缘底部：5px；
最大宽度：99%；
}
。选择7\u内容{
右侧填充：15px；
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}
.选择7{
位置：绝对位置；
背景：rgba（0,0,0,0.486）；
颜色：rgba（255，255，255，0）；
边界：无；
宽度：100%；
身高：100%；
排名：0；
左：0；
不透明度：0；
-webkit外观：无；
-moz外观：无；
左侧填充：5px；
}
.选择7\u选择>选项{
背景：rgba（0,0,0,0.486）；
颜色：rgb（255、255、255）；
字体大小：15px；
/*字体大小：粗体*/
/*为粗体选项添加此选项*/
}
。选择7_del{
位置：绝对位置；
顶部：2个；
右：3px；
}
。选择7_del：悬停{
光标：指针；
}
.选择7_项：悬停{
背景色：rgba（255、255、255、0.603）；
}
。选择7\u隐藏{
显示：无；
}
选择7演示
选择7演示
▾
模因评论
CSS
剧本
.NET
你好，世界
是的，伙计
老兄
沃尔沃汽车
萨博
梅赛德斯
奥迪