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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
简单实现js倒计时功能
Feb 13 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
Web安全之XSS攻击与防御小结
Dec 13 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
大学专科求职信
2014/07/02 职场文书
暑期学习心得体会
2014/09/02 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
Golang 遍历二叉树
2022/04/19 Golang