js模拟select下拉菜单控件的代码


Posted in Javascript onMay 08, 2013
<!DOCTYPE html>
 <html>
 <head>
 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <meta charset=utf-8 />
 <title>js模拟select</title>
 </head>
    <style>
   *{ margin:0; padding:0;}
   li{ list-style:none;}
   body{ font:12px "宋体"; color:#666;}
   .select_down{ margin:100px auto; position:relative; width:600px; min-height:200px; height:auto!important; height:200px; border:1px solid #ccc; padding:20px; border-radius: 8px}
   .select_down dt{float:left;width:134px;position:relative;margin-right:5px;display:inline;}
   .select_down h3{color: #919191; font-size:12px;font-weight: normal;border:1px solid #e5e5e5;height:18px;background:#fbfbfb;line-height: 18px;text-indent:8px;}
   .select_down ul{width: 132px;border: 1px solid #e5e5e5;background:#fbfbfb;position: absolute;top: 18px;left: 0;
 z-index: 1;text-indent:8px;display:none;}
 .select_down ul li{height:22px;line-height: 22px;cursor:pointer;}
 .select_down ul li.hover{background:#f2f2f2;}
  .select_down dt a{background:url('https://3water.com/hxh-hua/478335/o_select.jpg') no-repeat;position:absolute;width:18px;height:18px;top:1px;right:1px; }
   </style>
 <body>
   <div class="select_down" id="sel">
           <dl>
             <dt>
                 <h3>select选择</h3>
                 <a href="javascript:;"></a>
                 <ul>
                     <li>jq的select模拟1</li>
                     <li>jq的select模拟2</li>
                     <li>jq的select模拟3</li>
                 </ul>
             </dt>
             <dt>
                 <h3>select选择2</h3>
                 <a href="javascript:;"></a>
                 <ul>
                     <li>jq的select模拟11</li>
                     <li>jq的select模拟22</li>
                     <li>jq的select模拟31</li>
                 </ul>
             </dt>         </dl>
 </div>
   <script>
     window.onload=function(){
     var oflink = document.getElementById('sel');
     var aDt = oflink.getElementsByTagName('dt');
     var aUl = oflink.getElementsByTagName('ul');
     var aH3= oflink.getElementsByTagName('h3');
     for(var i=0;i<aDt.length;i++){
         aDt[i].index = i;
         aDt[i].onclick = function(ev){
             var ev = ev || window.event;
             var This = this;
             for(var i=0;i<aUl.length;i++){
                 aUl[i].style.display = 'none';
             }
             aUl[this.index].style.display = 'block';
             document.onclick = function(){
                 aUl[This.index].style.display = 'none';
             };
             ev.cancelBubble = true;
         };
     }
     for(var i=0;i<aUl.length;i++){
         aUl[i].index = i;
         (function(ul){
             var iLi = ul.getElementsByTagName('li');
             for(var i=0;i<iLi.length;i++){
                 iLi[i].onmouseover = function(){
                     this.className = 'hover';
                 };
                 iLi[i].onmouseout = function(){
                     this.className = '';
                 };
                 iLi[i].onclick = function(ev){
                     var ev = ev || window.event;
                     aH3[this.parentNode.index].innerHTML = this.innerHTML;
                     ev.cancelBubble = true;
                     this.parentNode.style.display = 'none';
                 };
             }
         })(aUl[i]);
     }
 }
   </script>
 </body>
 </html>
Javascript 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
Puppet的一些技巧
Sep 17 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
js工具方法弹出蒙版
May 08 #Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 #Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 #Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 #Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 #Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 #Javascript
JS中的substring和substr函数的区别说明
May 07 #Javascript
You might like
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
JS实现购物车特效
2017/02/02 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
js正则表达式简单校验方法
2021/01/03 Javascript
【python】matplotlib动态显示详解
2019/04/11 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
金属材料工程个人求职的自我评价
2013/12/04 职场文书
关于安全的标语
2014/06/10 职场文书
北京申奥口号
2014/06/19 职场文书
学校标语大全
2014/06/19 职场文书
护理专科学生自荐书
2014/07/05 职场文书
单位单身证明样本
2014/10/11 职场文书
2015年三万活动总结
2015/03/25 职场文书
讲座新闻稿
2015/07/18 职场文书
python Polars库的使用简介
2021/04/21 Python
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server