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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
angular.element方法汇总
Jan 07 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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 动态多文件上传
2009/01/18 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
PyQt5实现下载进度条效果
2018/04/19 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
python3实现表白神器
2019/04/09 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
增大python字体的方法步骤
2020/07/05 Python
Python加速程序运行的方法
2020/07/29 Python
python list的index()和find()的实现
2020/11/16 Python
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
物业管理应届生求职信
2013/10/28 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
工程管理英文求职信
2014/03/18 职场文书
安全标语大全
2014/06/10 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
浅谈Python魔法方法
2021/06/28 Java/Android