我们在进行表单设计时，可能要用到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. OpenCV——非线性滤波器

    参考: PS 图像特效,非线性滤波器 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_IN ...

  2. HihoCoder1663双阶乘的末尾数字（[Offer收割]编程练习赛40）（暴力||数学）

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定正整数x和k,判断是否存在正整数1 ≤ y ≤ x使得x与y同奇偶且(x!!)/(y!!)的个位数字为k. 其中x!! ...

  3. bzoj 4044: Virus synthesis 回文自动机

    题目大意: 你要用ATGC四个字母用两种操作拼出给定的串: 将其中一个字符放在已有串开头或者结尾 将已有串复制,然后reverse,再接在已有串的头部或者尾部 一开始已有串为空.求最少操作次数. le ...

  4. UML Design Via Visual Studio-Sequence Diagram

    本文主要介绍在Visual Studio中设计时序图,内容如下: 何时使用时序图 时序图元素介绍 条件.循环在时序图中的使用 直接通过代码生成时序图 一.何时使用时序图 当要查看单个用例内若干对象的行 ...

  5. docker 容器内服务自启动

    centos6/7 有区别先说6 centos6: 方式一:rc.local + 容器内的启动脚本 1.chkconfig docker on #docker开机自启动2.[root@master y ...

  6. QTP使用outlook发送邮件

    '发邮件 Dim objOutlook  Dim objOutlookMsg Dim olMailItem  ' Create the Outlook object and the new mail ...

  7. PCLVisualizer可视化类（4）

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=168 多视口显示 所示,并进行比较分析,利用不同的搜索半径,基于同一点云计算 ...

  8. hadoop-2.3.0-cdh5.1.0完全分布式搭建（基于centos）

    先参考:<hadoop-2.3.0-cdh5.1.0伪分布安装(基于centos)> http://blog.csdn.net/jameshadoop/article/details/39 ...

  9. 基于MapReduce的矩阵乘法

    参考:http://blog.csdn.net/xyilu/article/details/9066973文章 文字未得及得总结,明天再写文字,先贴代码 package matrix; import ...

  10. centos-6.4 yum EPEL

    初用centos,很多不习惯,记录一下. 首先装EPEL,不然默认的包少得可怜:(详见:http://www.rackspace.com/knowledge_center/article/instal ...