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 相关文章推荐
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 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
VOLVO车载收音机
2021/03/02 无线电
PHP令牌 Token改进版
2008/07/18 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python滑块验证码的破解实现
2019/11/10 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
生产车间主任的个人自我鉴定
2013/10/25 职场文书
升职自荐书范文
2013/11/28 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
公路绿化方案
2014/05/12 职场文书
个人借款协议书范本
2014/11/17 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
思想品德评语大全
2014/12/31 职场文书
毕业典礼主持词
2015/06/29 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
关于MySQL中的 like操作符详情
2021/11/17 MySQL
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS