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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
jquery解析xml字符串简单示例
2014/04/11 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
大学生入党思想汇报
2014/01/14 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
2014年工程工作总结
2014/11/25 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
合理化建议书
2015/02/04 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
Python实现机器学习算法的分类
2021/06/03 Python
Oracle11g R2 安装教程完整版
2021/06/04 Oracle