我们在进行表单设计时，可能要用到select下拉选项控件，遗憾的是，IE浏览器默认的select控件外观非常丑陋，而且不能用样式来控制，不能在选项中添加图片等信息。今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单。

<!DOCTYPE html>

<html>

<head>

	<title></title>

	<style type="text/css">

		*{

			margin:0;

			padding:0;

		}

		ul li {

			list-style: none;

		}

		#dropdown{width:186px; margin:80px auto; position:relative;font-size:16px;}

        #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}

	</style>

</head>

<body>

 <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>

<script src="http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>

<script type="text/javascript">

    $("#dropdown p").click(function(){

        var ul = $("#dropdown ul");

        if(ul.css("display")=="none"){

            ul.slideDown("fast");

        }else{

            ul.slideUp("fast");

        } 

    $("#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);

    });

    });

</script>

</body>

</html>

　　

手写的select 下拉菜单的更多相关文章

  1. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  2. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  3. select 下拉菜单Option对象使用add(elements,index)方法动态添加

    原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...

  4. 【特效】手机端仿美团下拉菜单带遮罩层html+css+jquery

    写了一个手机端的下拉菜单,类似美团,用相对单位rem写的. 效果截图: 代码很简单,原理有点类似嵌套的选项卡,其中的难点在于弹出下拉菜单后,出现黑色半透明遮罩层,而且下层列表页面禁止滚动了.关键就是给 ...

  5. select下拉菜单反显不可改动，且submit能够提交数据

    首先通过后台funcA()将下拉菜单反显不可改动的数据response到disable.jsp页面,disable.jsp: <script> var data1=${result.obj ...

  6. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  7. 怎样用css写出一个下拉菜单

    <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 bo ...

  8. 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

    这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...

  9. Jquery-操作select下拉菜单

    jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selec ...

随机推荐

  1. Convolutional Neural Networks for Visual Recognition 8

    Convolutional Neural Networks (CNNs / ConvNets) 前面做了如此漫长的铺垫,现在终于来到了课程的重点.Convolutional Neural Networ ...

  2. [原]NYOJ-公约数和公倍数 -40

    大学生程序代写 //http://acm.nyist.net/JudgeOnline/problem.php?pid=40 公约数和公倍数 时间限制:1000 ms  |  内存限制:65535 KB ...

  3. 表达式计算-----------eval()运算符

    1.java的eval()方法(或称之为运算符)可以将字符串解析成可以运行的javaScript代码,例如 eval()只有一个参数.如果传入的参数不是一个字符串,那么它会直接返回这个参数.如果传入的 ...

  4. VC6++常用快捷键

    VC6快捷键大全(转载) VC6快捷键大全,记在这里,方便查阅.F1: 帮助Ctrl+O :OpenCtrl+P :PrintCtrl+N :NewCtrl+Shift+F2 :清除所有书签F2 :上 ...

  5. scrollHeight

    scrollHeight=显示内容高度+隐藏内容高度 参考: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight ...

  6. debian服务查询

    1.查询 用root身份执行service --status-all查看所有服务的状态 "+" started "-" stopped "?" ...

  7. 2006浙大火星A+B

    题目描述:     读入两个不超过25位的火星正整数A和B,计算A+B.需要注意的是:在火星上,整数不是单一进制的,第n位的进制就是第n个素数.例如:地球上的10进制数2,在火星上记为“1,0”,因为 ...

  8. CentOS 7 配置 http 服务器

    一.http单域名访问 1.安装软件: yum -y install httpd 2.启动服务:systemctl  start httpd 3.设置开机启动: systemctl enable ht ...

  9. 23. Bypass ngx_lua_waf SQL注入防御（多姿势）

    0x00 前言 ngx_lua_waf是一款基于ngx_lua的web应用防火墙,使用简单,高性能.轻量级.默认防御规则在wafconf目录中,摘录几条核心的SQL注入防御规则: select.+(f ...

  10. UCD9222 EN1/EN2

    如果要使用UCD9222 EN1/EN2来控制每路电源的输出,那么需要注意实际是由PMBUS_CNTRL和EN1/EN2的与来控制每路的输出.