我们在进行表单设计时，可能要用到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. Oracle 12c 新特性之 temp undo

    Oracle 12c R1 之前,临时表生成的undo记录是存储在undo表空间里的,通用表和持久表的undo记录也是类似的.而在 12c R12 的临时 undo 功能中,临时 undo 记录可以存 ...

  2. Python图片识别——人工智能篇

     一.安装pytesseract和PIL PIL全称:Python Imaging Library,python图像处理库,这个库支持多种文件格式,并提供了强大的图像处理和图形处理能力. 由于PIL仅 ...

  3. css菜鸟学习之block，inline和inline-block概念和区别

    block,inline和inline-block概念和区别   总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...

  4. PWA PSI statusingclient.UpdateStatus更新任务页面的AssnCustomFields的TextValue值

    1.注意Changesxml格式和下面一定要一样 2.CustomFieldGuid和CustomFieldName都不能少,自定义域的uid和name其中uid或者是MD_PROP_UID_SECO ...

  5. 关于KMeans 最外围点移除实验（其中心保持不变）

    import matplotlib.pyplot as plt from sklearn.datasets import make_blobs import numpy as np X,labels ...

  6. 并发设计模式和锁优化以及jdk8并发新特性

    1 设计模式 (1) 单例模式 保证一个类只能一个对象实现.正常的单例模式分为懒汉式和饿汉式,饿汉式就是把单例声明称static a=new A(),系统第一次调用的时候生成(包括调用该类的其他静态资 ...

  7. [51nod1267]4个数和为0(预处理+双指针)

    题意:判断能否从序列中找出4个数的和为0. 解题关键:n^2预处理任意两个数的和,sort一下,双指针进行判定. 此解法尚存在一个问题,就是左右枚举的时候如果相同的有许多的时候该左边移动还是右边移动 ...

  8. Windows 10 PC 安装 Docker CE

    系统要求 Docker CE 支持 64 位版本的 Windows 10 Pro,且必须开启 Hyper-V. 如果系统是win 10 家庭版安装 docker  很恶心, 我也是废了2天才安装, 由 ...

  9. Linux服务器监控工具--Nmon介绍

    一.Nmon介绍(详细请参考百度百科) 是一款分析 AIX 和 Linux 性能的免费工具,这个高效的工具可以工作于任何哑屏幕.telnet 会话.甚至拨号线路.另外,它并不会消耗大量的 CPU 周期 ...

  10. R：安装、导入各种包。

    library和require都可以载入包,但二者存在区别. #在一个函数中,如果一个包不存在,执行到library将会停止执行,require则会继续执行.require将会根据包的存在与否返回tr ...