我们在进行表单设计时，可能要用到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. H264视频编码成MP4文件

    firehood的专栏 Wince嵌入式开发       目录视图 摘要视图 订阅 赠书 | AI专栏(AI圣经!<深度学习>中文版)      每周荐书:Kotlin.分布式.Keras ...

  2. poj2395

      #include<iostream> #include<cstdio> #include<algorithm> #include<cstdlib> ...

  3. SPOJ Query on a tree III (树剖(dfs序)+主席树 || Splay等平衡树)（询问点）

    You are given a node-labeled rooted tree with n nodes. Define the query (x, k): Find the node whose ...

  4. HDOJ1151有向图最小路径覆盖

    //有向图最小路径覆盖:从某一点出发沿着有向路径,不走回路,能将所有的结点遍历. #include<iostream> #include<cstdio> #include< ...

  5. 杂项：grunt-tmod

    ylbtech-杂项:grunt-tmod 前端模板预编译工具 tmodjs 的grunt自动化插件. 1.返回顶部 1. grunt-tmod 前端模板预编译工具 tmodjs 的grunt自动化插 ...

  6. glusterfs安装配置简单使用

    GlusterFS是一种分布式分布式文件系统,默认采用无中心完全对等架构,搭建维护使用十分简单,是很受欢迎的分布式文件系统. 官网https://www.gluster.org/,官网上表示Glust ...

  7. uboot的relocation原理详细分析

    转自:http://blog.csdn.net/skyflying2012/article/details/37660265 最近在一直在做uboot的移植工作,uboot中有很多值得学习的东西,之前 ...

  8. java报表开发之报表总述

    转自:https://blog.csdn.net/u011659172/article/details/40504271?utm_source=blogxgwz6

  9. ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案

    这是因为路径问题,可以在jsp/config.json这个文件去改路径 通过“imageUrlPrefix”与“imagePathFormat”这两个属性去拼凑路径. “imageUrlPrefix” ...

  10. hbase java API跟新数据，创建表

    package hbaseCURD; import java.io.IOException; import org.apache.hadoop.conf.Configuration; import o ...