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 相关文章推荐
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
基于jquery编写分页插件
Mar 07 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
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
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
js实现拖拽功能
2017/03/01 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
python 实现归并排序算法
2012/06/05 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python 从attribute到property详解
2020/03/05 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python里glob模块知识点总结
2021/01/05 Python
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
项目技术负责人岗位职责
2015/04/13 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
跑出一片天观后感
2015/06/08 职场文书
安全教育主题班会总结
2015/08/14 职场文书
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL