这篇文章主要为大家详细介绍了射流研究…实现挑选下拉框选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近在做一个项目需要兼容到爱尔兰共和国不同版本，在使用挑选时遇到了各种问题。后来索性就自己使用原生射流研究…实现了这样一个下拉框，话不多说，直接上代码吧。
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
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。