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 布尔型分析
Dec 22 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
15种PHP Encoder的比较
2007/04/17 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
通信专业个人自我鉴定
2013/10/21 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
学校会议通知范文
2015/04/15 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书