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获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
javascript 产生随机数的几种方法总结
Sep 26 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
详解Vue之计算属性
Jun 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
PHP微框架Dispatch简介
2014/06/12 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python psutil模块简单使用实例
2015/04/28 Python
python类装饰器用法实例
2015/06/04 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
省级青年文明号申报材料
2014/05/23 职场文书
生物技术专业求职信
2014/06/10 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
大学生实训报告总结
2014/11/05 职场文书
城管年度个人总结
2015/02/28 职场文书
我的长征观后感
2015/06/09 职场文书
教师旷工检讨书
2015/08/15 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书