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 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
Vue基础配置讲解
Nov 29 Javascript
Vue数字输入框组件示例代码详解
Jan 15 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
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
2010/08/10 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
记录Django开发心得
2014/07/16 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python 多线程实例详解
2017/03/25 Python
python 调用c语言函数的方法
2017/09/29 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python3爬取数据至mysql的方法
2018/06/26 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
七一党日活动总结
2014/07/08 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
2015年教研员工作总结
2015/05/26 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers