js实现select下拉框选择


Posted in Javascript onJanuary 11, 2020

最近在做一个项目需要兼容到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下拉框选择

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
jquery ajax 同步异步的执行示例代码
Jun 23 Javascript
围观tangram js库
Dec 28 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
jQuery的position()方法详解
Jul 19 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
js实现二级联动简单实例
Jan 11 #Javascript
jQuery实现轮播图效果demo
Jan 11 #jQuery
详解微信小程序中var、let、const用法与区别
Jan 11 #Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 #jQuery
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 #Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
删除重复数据的算法
2006/11/23 Javascript
ppk谈JavaScript style属性
2008/10/10 Javascript
javascript事件问题
2009/09/05 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
python中实现定制类的特殊方法总结
2014/09/28 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
keras之权重初始化方式
2020/05/21 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
Python页面加载的等待方式总结
2021/02/28 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
考试退步检讨书
2014/01/15 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
护士个人总结范文
2015/02/13 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
如何利用python实现列表嵌套字典取值
2022/06/10 Python