我们在进行表单设计时，可能要用到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. 2016北京集训 小Q与进位制

    题目大意 一个数每一位进制不同,已知每一位的进制,求该数的十进制表达. 显然有 $$Ans=\sum\limits_{i=0}^{n-1}a_i \prod\limits_{j=0}^{i-1}bas ...

  2. Sqlite表结构读取工具，word批量转html，在线云剪贴板，文件批量提取工具；

    工欲善其事必先利其器,本周为您推荐工具排行 Sqlite表结构读取工具,word批量转html,在线云剪贴板,文件批量提取工具:     本周我们又要发干货了,准备好接受了吗? 为什么是干货,就是因为 ...

  3. uoj problem 10

    uoj problem 10 题目大意: 给定任务若干,每个任务在\(t_i\)收到,需要\(s_i\)秒去完成,优先级为\(p_i\) 你采用如下策略: 每一秒开始时,先收到所有在该秒出现的任务,然 ...

  4. bzoj 1101 Zap —— 莫比乌斯反演

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1101 直接莫比乌斯反演. 代码如下: #include<cstdio> #inc ...

  5. poj 1519 Digital Roots (计算根数字)

    一.Description The digital root of a positive integer is found by summing the digits of the integer. ...

  6. canvas变换（移动，缩放等）

    代码: 1 /** 2 * Created by Administrator on 2016/1/30. 3 */ 4 function draw (id){ 5 var canvas = docum ...

  7. makefile 基础知识

    $@    目标文件名 $< 第一个依赖文件名 $^ 规则所有依赖文件列表 如果不想让执行语句被打印出来,就在语句前面加上@符号 模式规则 %.o:%.c 后缀规则 .c.o 生成单进程的Mak ...

  8. 安装LMS记

    LMS学习管理系统,即英文Learning Management System的缩写.中文常用别名:在线学习系统. 尝试安装一款LMS,并进行二次开发. Moodle 首先想到的是Moodle.Moo ...

  9. RESTEasy入门学习

    RESTEasy是JBoss的开源项目之一,是一个RESTful Web Services框架.RESTEasy的开发者Bill Burke同时也是JAX-RS的J2EE标准制定者之一.JAX-RS是 ...

  10. C++经典题目：约瑟夫环问题

    问题描述: 有n个人围成一圈,顺序排号.从第一个人开始报数(1~3报数),凡报到3的人退出圈子,问最后留下的人原来排在第几号. 分析: 首先由用户输入人数n,然后对这n个人进行编号[因为如果不编号的话 ...