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 相关文章推荐
javascript 写的一个简单的timer
Jul 30 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
uniapp实现横向滚动选择日期
Oct 21 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
php数组随机排序实现方法
2015/06/13 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python实现定时任务
2017/02/08 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python实现飞机大战游戏
2020/10/26 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
中式餐厅创业计划书范文
2014/01/23 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
公务员考察材料范文
2014/12/23 职场文书
医院合作意向书范本
2015/05/08 职场文书
食品安全主题班会
2015/08/13 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python