JS模拟实现Select效果代码


Posted in Javascript onSeptember 24, 2015

本文实例讲述了JS模拟实现Select效果代码。分享给大家供大家参考。具体如下:

这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了。

运行效果截图如下:

JS模拟实现Select效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟Select效果</title>
</head>
<body>
 <style>
 ul,li{list-style-type:none;padding:0;margin:0;}
 .select{width:200px;height:22px;line-height:22px;border:1px solid #dcdcdc;}
 #text_left{display:block;width:180px;float:left;padding:0 5px;}
 #arrow_right{
  display:block; 
 border-color:#FF6600 #FFFFFF #FFFFFF #FFFFFF;
 border-style: solid;
 border-width: 4px;
 display: block;
 font-size: 0;
 height: 0;
 line-height: 0;
 width: 0;
 float:left;margin-top:8px;
 cursor:pointer;
 }
 .list{width:200px;border:1px solid #dcdcdc;border-top:0;display:none;}
 .list li{line-height:24px;padding:0 5px;}
 .list li:hover{background:#F8F3F4;cursor:pointer;}
 </style>
 <div class="select">
 <span id="text_left">三水点靠木</span>
 <span id="arrow_right"></span> 
 </div>
 <ul class="list">
 <li>新浪新闻</li>
 <li>腾讯门户</li>
 <li>凤凰影视</li>
 <li>奇艺高清</li> 
 </ul>
 <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
 <script type="text/javascript">
 $(function(){
  $('#arrow_right').click(function(e){
  $('.list').toggle();
  e.stopPropagation();
   $('body').click(function(){
   $('.list').hide();
   })
  })
  $('.list li').click(function(){
  $('#text_left').text(($(this).text())); 
  }) 
  })
 </script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
纯文字版返回顶端的js代码
Aug 01 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue自定义指令封装节流函数的方法示例
Jul 09 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
JS基于面向对象实现的拖拽库实例
Sep 24 #Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 #Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 #Javascript
You might like
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python打包成so文件过程解析
2019/09/28 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
上班早退检讨书
2014/01/09 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
检察院起诉书
2015/05/20 职场文书