js实现select下拉框菜单


Posted in Javascript onDecember 08, 2015

本文实例讲述了js实现select下拉框菜单的详细代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

js实现select下拉框菜单

具体代码如下:

<!DOCTYPE html>

<html>

<head>
 <title></title>
 <style type="text/css">
  #gridComboBox {
  background: #fff;
  border: 1px solid #2d78f4;
  border-radius: 2px;
  -moz-box-shadow: inset 0 0 4px #06c;
  -webkit-box-shadow: inset 0 0 4px #06c;
  box-shadow: inset 0 0 4px #06c;
 }
 </style>
</head>

<body>
 <input onclick="doClick(this,'ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee')" />
 <input onclick="doClick(this,'ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee')" style='width: 300px;' />
 <p><b>Needed Properties:</b> sender.offsetTop & sender.offsetLeft & sender.offsetHeight</p>
</body>

</html>
<script type="text/javascript">

function delGridComboBox() { // 删除弹出框
 var divContainer = document.getElementById('gridComboBox');
 if (divContainer) {
  divContainer.parentNode.removeChild(divContainer);
 }
}

function doClick(sender, str) {//str='ddd(aa/bb/cc/erererer/dfdfdfdfdfdfdfdfdfdfdfdfdf/ejjejrjerjer//erererer ////////)eee' 只取()得内容/分割做为数据源

 delGridComboBox();

 // console.log(sender);
 // for(var i in sender) 
 // {
 //  console.log(i+"|"+sender[i]);
 // }

 
 var re = /[^\)\(]*/g //取出()中的内容作为下拉数据源
 var fit = str.match(re);
 var fmt = fit[2].split('/');

 var divContainer = document.createElement('div');
 divContainer.style.width = sender.clientWidth + 2 + "px";
 divContainer.style.overflow = "hidden";
 divContainer.style.position = 'absolute'; 
 divContainer.style.top = sender.offsetTop + sender.offsetHeight + 'px';
 divContainer.style.left = sender.offsetLeft + 'px';
 divContainer.style.zIndex = 999;
 divContainer.id = "gridComboBox";

 for (var i = 0; i < fmt.length; i++) {  

  console.log('fmt[i]>>', fmt[i]);
  var txt = document.createElement('div'); 
  txt.innerHTML = fmt[i];
  txt.title = txt.innerHTML;
  txt.style.margin = 3+'px';  
  txt.addEventListener('mouseover', function changeBg(event) {
   event.target.style.fontWeight = 'bold';
   event.target.style.color = 'white';
   event.target.style.backgroundColor = '#2d78f4';
  }, false);
  txt.addEventListener('mouseout', function unChangeBg(event) {
   event.target.style.fontWeight = 'normal';
   event.target.style.color = 'black';
   event.target.style.backgroundColor = 'white';
  }, false);
  txt.onclick = function(subSender) {
   sender.value = subSender.target.innerText;
   delGridComboBox();
  };
  divContainer.appendChild(txt);
 };
 
 document.body.appendChild(divContainer);
};
</script>

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是js实现select下拉框菜单的代码,希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
Javascript动画效果(1)
Oct 11 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 #Javascript
JavaScript的代码编写格式规范指南
Dec 07 #Javascript
JSON遍历方式实例总结
Dec 07 #Javascript
JS实现日期时间动态显示的方法
Dec 07 #Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 #Javascript
js实现遍历含有input的table实例
Dec 07 #Javascript
JavaScript中的return语句简单介绍
Dec 07 #Javascript
You might like
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
让python json encode datetime类型
2010/12/28 Python
Python的UTC时间转换讲解
2019/02/26 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
党员培训思想汇报
2014/01/07 职场文书
酒店总经理助理职责
2014/02/12 职场文书
2014教师研修学习体会
2014/07/08 职场文书
应聘教师自荐信
2015/03/26 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle