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 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 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
浅析iis7.5安装配置php环境
2015/05/10 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
python 自动去除空行的实例
2018/07/24 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python实现随机加减法生成器
2020/02/24 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
新闻传媒系求职信范文
2014/04/19 职场文书
销售人员求职信
2014/07/22 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
会议欢迎词
2015/01/23 职场文书
学校捐书活动总结
2015/05/08 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python