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中opener与parent的区别详细解析
Jan 14 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
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/03/27 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
js实现密码强度检验
2017/01/15 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python读写LMDB文件的方法
2018/07/02 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
奥运会口号
2014/06/13 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
办公室主任个人总结
2015/02/28 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python