原生js实现select下拉框选择

最近在做一个项目需要兼容到ie不同版本，在使用select时遇到了各种问题。后来索性就自己使用原生js实现了这样一个下拉框，话不多说，直接上代码吧。

<html lang="en">
<head><meta charset="UTF-8"><title>自定义select</title>
</head>
<style>*{margin: 0;padding: 0;}#main{position: relative;width: 280px;height: 42px;}#content{width: 280px;height: 42px;line-height: 42px;padding-left: 10px;background: rgb(255, 255, 255);border-radius: 2px;border: 1px solid rgb(221, 221, 221);font-size: 16px;font-family: MicrosoftYaHei;color: rgb(51, 51, 51);cursor: pointer;}#selectImg{position: absolute;top:13px;right: 10px;cursor: pointer;}#selectItem{display: none;border: 1px solid #eee;width: 290px;}#selectItem ul{list-style: none;}#selectItem ul li{height: 30px;line-height: 30px;padding-left: 10px;cursor: pointer;}#selectItem ul li:hover{background-color:#f5f7fa;}
</style>
<body><div id="main"><div id="content"></div><img id="selectImg" src="./icon_select.png" alt=""><div id="selectItem"><!--    <ul><li data-value="1">北京</li><li data-value="2">上海</li><li data-value="3">深圳</li></ul>--></div></div></body>
<script>var data = [{name:'北京',value:'1'},{name:'上海',value:'2'},{name:'广州',value:'3'}]var content = document.getElementById('content');var selectImg = document.getElementById('selectImg');var selectItem = document.getElementById('selectItem');var ul = document.createElement('ul');selectItem.appendChild(ul);for(var i = 0; i < data.length; i++){var li = document.createElement('li');li.setAttribute('data-value',data[i].value);li.innerText = data[i].name;ul.appendChild(li);}/*** 点击下拉箭头*/selectImg.onclick = function () {console.log(selectItem.style.display);if(selectItem.style.display == 'none' || selectItem.style.display == ''){selectItem.style.display = 'block';}else{selectItem.style.display = 'none';}}content.onclick = function () {if(selectItem.style.display == 'none' || selectItem.style.display == ''){selectItem.style.display = 'block';}else{selectItem.style.display = 'none';}}var lis = selectItem.getElementsByTagName('li');for(var i = 0; i < lis.length; i++){lis[i].onclick = function () {console.log(this.innerHTML,this.getAttribute('data-value'));content.innerText = this.innerHTML;selectItem.style.display = 'none';}}
</script>
</html>

原生js实现select下拉框选择相关推荐

html下拉框 js选中,js实现select下拉框选择
最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题.后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧. 自定义select *{ margin: 0; p ...
js控制html下拉框select的选择,js实现select下拉框选择
最近在做一个项目需要兼容到ie不同版本,在使用select时遇到了各种问题.后来索性就自己使用原生js实现了这样一个下拉框,话不多说,直接上代码吧. 自定义select *{ margin: 0; p ...
element select 自动展开_原生js 让select下拉框自动展开可用size 属性来代替展开动作...
找遍全网都没一个比较好的例子!!! 什么获得焦点事件,或者添加一个点击事件都不能使下拉框自动展开最后用标签的siz属性定义和用法 size 属性规定下拉列表中可见选项的数目. 如果 size 属性 ...
获取html下拉菜单selected,原生js获取select下拉框的selected的option项
一. 使用原生js,获取select标签下属性有selected的option项. 先写一个select标签如下: TEXT-aaaaa TEXT-bbbbb 原生js获取select标签这个对象 ...
下拉框选中状态html,js中select下拉框选中
怎么用js动态设置select中的某个值为选中值 select 中的某个options为新建,但在子页面新建一个选项时怎么能提交新用JS动态设置select的方法如下: 手动通过原生JS来实现: / ...
js填充select下拉框并选择默认值
/* 使用json数组填充下拉框并复选 *//* 初始化下拉框数据 */ var jsonStr = { "data": [] }; for (var str in JsonStr ...
js中select下拉框重置_Web测试中需要注意的16个小细节
随着Internet和Intranet/Extranet的快速增长,Web已经对商业.工业.银行.财政.教育.政府和娱乐及我们的工作和生活产生了深远的影响.许多传统的信息和数据库系统正在被移植到互联网 ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...
js往select下追加html,js给select下拉框赋值
JS如何动态给select的option赋值? New Document function change (){ var sel = document.getElementById('sel'); s ...

原生js实现select下拉框选择

原生js实现select下拉框选择相关推荐

最新文章

热门文章