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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
摘自启点的main.js
Apr 20 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 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使用PDO连接ACCESS数据库
2015/03/05 PHP
php实现微信发红包
2015/12/05 PHP
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
pyside写ui界面入门示例
2014/01/22 Python
Django中Model的使用方法教程
2018/03/07 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python中的类与类型示例详解
2019/07/10 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python使用html2text库实现从HTML转markdown的方法详解
2020/02/21 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
python如何从键盘获取输入实例
2020/06/18 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
基于python实现操作git过程代码解析
2020/07/27 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
yy婚礼司仪主持词
2014/03/14 职场文书
酒店开业策划方案
2014/06/02 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
手术室护士个人总结
2015/02/13 职场文书
微信搭讪开场白
2015/05/28 职场文书
标枪加油稿
2015/07/22 职场文书
教师教育心得体会
2016/01/19 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis