这篇文章主要为大家详细介绍了射流研究…实现挑选下拉框选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近在做一个项目需要兼容到爱尔兰共和国不同版本，在使用挑选时遇到了各种问题。后来索性就自己使用原生射流研究…实现了这样一个下拉框，话不多说，直接上代码吧。
html lang=en
头
meta charset=UTF-8
标题自定义选择/标题
/头
风格
*{
边距：0;
填充：0;
}
#main{
位置：相对；
宽度：280像素
高度：42px
}
#内容{
宽度：280像素
高度：42px
行高：42px
左填充：10px
背景：rgb(255，255，255)；
边框-半径：2px
边框：1px纯色rgb(221，221，221)；
字体大小：16px
字体系列：微软雅黑；
颜色：rgb(51，51，51)；
光标：指针；
}
#选择{
位置：绝对；
top:13px；
右：10px
光标：指针；
}
#选择项目{
显示：无；
边框：1px纯色# eee
宽度：290像素
}
#选择项目ul{
列表样式：无；
}
#selectItem ul li{
高度：30px
行高：30px
左填充：10px
光标：指针；
}
#selectItem ul li:hover{
背景色：# f5f 7 fa
}
/风格
身体
div id=main
div id=content
/div
img id= selectImg src= ./icon_select.png alt=
div id=selectItem
！- ul
里数据值=1 北京/李
里数据值=2 上海/李
里数据值=3 深圳/李
/ul -
/div
/div
/body
脚本
var data=[{name:北京，值： 1},{名称：上海，值： 2},{名称：广州，值： 3}]
var内容=文档。getelementbyid(“content”)；
var selectImg=文档。getelementbyid( selectImg )；
var selectItem=document。getelementbyid( selectItem )；
var ul=文档。createelement(“ul”)；
选择项目。appendchild(ul)；
for(var I=0；我数据长度；i ){
var Li=文档。createelement(“Li”)；
li.setAttribute(data-value ，data[i].值);
li.innerText=data[i].姓名；
ul.appendChild(李);
}
/**
* 点击下拉箭头
*/
选择。onclick=function(){
控制台。日志(选择项目。风格。展示)；
如果(选择项目。风格。display== none | | selectitem。风格。display== ){
选择项目。风格。display= block
}否则{
选择项目。风格。display= none
}
}
content.onclick=function () {
如果(选择项目。风格。display== none | | selectitem。风格。display== ){
选择项目。风格。display= block
}否则{
选择项目。风格。display= none
}
}
var lis=selectitem。getelementsbytagname( Li )；
for(var I=0；长度；i ){
列表[我].onclick=function () {
console.log(this.innerHTML，this。get attribute( data-value )；
内容。innertext=this。innerhtml
选择项目。风格。display= none
}
}
/脚本
/html
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
