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 相关文章推荐
JavaScript类库D
Oct 24 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
微信开发 微信授权详解
Oct 21 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
php导出excel格式数据问题
2014/03/11 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
护理专业的自荐信
2013/10/22 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
四年级学生评语大全
2014/04/21 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
认错检讨书
2014/10/02 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android