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 相关文章推荐
js实现文本框中焦点在最后位置
Mar 04 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
Bootstrap基础学习
2015/06/16 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python3实现基于用户的协同过滤
2018/05/31 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
村委会主任先进事迹
2014/01/15 职场文书
公务员综合考察材料
2014/02/01 职场文书
《二泉映月》教学反思
2014/04/15 职场文书
物流专业自荐信
2014/05/23 职场文书
领导班子四风表现材料
2014/08/23 职场文书
科技馆观后感
2015/06/08 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
2016年党员承诺书范文
2016/03/24 职场文书