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 参数传递的实际应用代码分析
Sep 13 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
送你43道JS面试题(收藏)
Jun 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
ADODB的数据库封包程序库
2006/12/31 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
毕业生简历自我评价范文
2014/04/09 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
会计师事务所实习证明
2014/11/16 职场文书
房产分割协议书范文
2014/11/21 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书