jQuery结合CSS制作漂亮的select下拉菜单


Posted in Javascript onMay 03, 2015

我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息。今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单。

XHTML

<div id="dropdown"> 
  <p>请选择城市</p> 
  <ul> 
    <li><a href="#">长沙</a></li> 
    <li><a href="#">北京</a></li> 
    <li><a href="#">南京</a></li> 
    <li><a href="#">堪培拉</a></li> 
    <li><a href="#">多伦多</a></li> 
  </ul> 
</div>

可以看出,我们使用div来替换下拉选项控件原生的select标签。
CSS

#dropdown{width:186px; margin:80px auto; position:relative} 
#dropdown p{width:150px; height:24px; line-height:24px; padding-left:4px; padding-right:30px; 
border:1px solid #a9c9e2; background:#e8f5fe url(arrow.gif) no-repeat right 4px; 
color:#807a62; cursor:pointer} 
#dropdown ul{width:184px; background:#e8f5fe; margin-top:2px; border:1px solid #a9c9e2; 
position:absolute; display:none} 
#dropdown ul li{height:24px; line-height:24px; text-indent:10px} 
#dropdown ul li a{display:block; height:24px; color:#807a62; text-decoration:none} 
#dropdown ul li a:hover{background:#c6dbfc; color:#369}

样式不要多讲,你可以修改CSS中的背景色和字体颜色,甚至其他任意定义的样式。有一个下拉箭头的小图标,已经打包在附件里了。
jQuery
首先,当单击“请选择城市”时,判断下拉的层“ul”是否处于显示状态,如果是则隐藏下拉选项,否则则打开(下滑)下拉选项

$("#dropdown p").click(function(){ 
  var ul = $("#dropdown ul"); 
  if(ul.css("display")=="none"){ 
    ul.slideDown("fast"); 
  }else{ 
    ul.slideUp("fast"); 
  } 
});

然后,当单击下拉选项时,获取选项内容,将选项内容写入到<p>标签中,同时隐藏下拉选项。

$("#dropdown ul li a").click(function(){ 
  var txt = $(this).text(); 
  $("#dropdown p").html(txt); 
  $("#dropdown ul").hide(); 
});

这样就完成了一个简单的下拉选项的操作,是不是很简单啊。
当然,如果与后台交互,需要获取选项的value值,那就需要先定义XHTML。

<div id="dropdown"> 
  <p>请选择城市</p> 
  <ul> 
    <li><a href="#" rel="1">长沙</a></li> 
    <li><a href="#" rel="2">北京</a></li> 
    <li><a href="#" rel="3">南京</a></li> 
    <li><a href="#" rel="4">堪培拉</a></li> 
    <li><a href="#" rel="5">多伦多</a></li> 
  </ul> 
</div> 
<div id="result"></div>

从代码中可以看出,在给a标签加个rel属性,并赋值,就相当于select的option标签的value值。接下来就是通过jQuery获取rel值,请看代码:

$("#dropdown ul li a").click(function(){ 
  var txt = $(this).text(); 
  $("#dropdown p").html(txt); 
  var value = $(this).attr("rel"); 
  $("#dropdown ul").hide(); 
  $("#result").html("您选择了"+txt+",值为:"+value); 
});

这样就完成了一个完整的下拉选项的操作。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
js实现简单数字变动效果
Nov 06 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
jQuery实现的向下图文信息滚动效果
May 03 #Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 #Javascript
JQuery页面地址处理插件jqURL详解
May 03 #Javascript
jQuery的animate函数实现图文切换动画效果
May 03 #Javascript
php+ajax+jquery实现点击加载更多内容
May 03 #Javascript
jquery插件hiAlert实现网页对话框美化
May 03 #Javascript
javascript结合canvas实现图片旋转效果
May 03 #Javascript
You might like
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jquery easyui使用心得
2014/07/07 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
全面理解闭包机制
2016/07/11 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python实现zabbix发送短信脚本
2018/09/17 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
主题班会演讲稿
2014/05/22 职场文书
李开复演讲稿
2014/05/24 职场文书
单位工作证明格式模板
2014/10/04 职场文书
捐助感谢信
2015/01/22 职场文书
民事调解书范文
2015/05/20 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
JavaScript原型链详解
2021/11/07 Javascript