<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery.js">

    </script>

    <style>

        .select{

            width: 100px;

            height: 20px;

            position: relative;

            margin-top: 20px;

        }

        .select_show{

            width: inherit;

            height: inherit;

            border: 1px solid gray;

        }

        .select_option{

            width: inherit;

            height: inherit;

            border: 1px solid gray;

            border-top: 0;

        }

        .select_option_container{

            width: inherit;

            display: none;

            position: absolute;

            z-index: 999;

        }

    </style>

</head>

<body>

<div class="select">

    <div class="select_show">222</div>

    <div class="select_option_container">

        <div class="select_option">111</div>

        <div class="select_option">222</div>

        <div class="select_option">333</div>

    </div>

</div>

<div class="select">

    <div class="select_show">222</div>

    <div class="select_option_container">

        <div class="select_option">111</div>

        <div class="select_option">222</div>

        <div class="select_option">333</div>

    </div>

</div>

<div class="select">

    <div class="select_show">222</div>

    <div class="select_option_container">

        <div class="select_option">111</div>

        <div class="select_option">222</div>

        <div class="select_option">333</div>

    </div>

</div>

<div class="select">

    <div class="select_show">222</div>

    <div class="select_option_container">

        <div class="select_option">111</div>

        <div class="select_option">222</div>

        <div class="select_option">333</div>

    </div>

</div>

<div class="select">

    <div class="select_show">222</div>

    <div class="select_option_container">

        <div class="select_option">111</div>

        <div class="select_option">222</div>

        <div class="select_option">333</div>

    </div>

</div>

<script>

    $(".select_show").click(function(){

        var optionContainerLeft=0;

        var optionContainerTop=$(this).outerHeight();

        $(this).closest(".select").find(".select_option_container").css("left",optionContainerLeft).css("top",optionContainerTop).show();

    })

    $(".select_option").click(function(){

        $(this).closest(".select_option_container").hide();

        $(this).closest(".select").find(".select_show").html($(this).html());

    })

</script>

</body>

</html>

写了一个可以个性化设置的仿<select>标签的更多相关文章

  1. 如何设置 html 中 select 标签不可编辑、只读

    转载自: https://blog.csdn.net/hjm4702192/article/details/33729767 1. <select style="width:195px ...

  2. 写了一个Mac快速设置、打开和关闭Web代理的Shell命令

    缘由(痛点) 每次在Mac上设置Web代理,都需要点开"系统偏好设置 -- 网络 -- 高级 -- 代理",然后分别设置Web代理(HTTP)和安全Web代理(HTTPS),设置完 ...

  3. 写了一个基于React+Redux的仿Github进度条

    曾经实现过Angular版,这次感觉用了高大上的React却写了更多的代码,需要的配置也更多了,有利有弊吧. 但这个“导航条问题”很有意思,涉及到在Redux中写timer,其实我很困惑,到底如何完美 ...

  4. 解决如何通过循环来使用数据库的值设置jsp的select标签的option值

    Select 处的代码: <select name="position"> <span style="white-space:pre"> ...

  5. 自己写的一个用js把select换成div与span与ul的东西

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 使用 vue 仿写的一个购物商城

    在学习了 vue 之后,决定做一个小练习,仿写了一个有关购物商城的小项目.下面就对项目做一个简单的介绍. 项目源码: github 项目的目录结构 -assets 与项目有关的静态资源,包括 css, ...

  7. CI(codeigniter)框架，routes.php设置正确，但是显示服务器错误，是__construct少写了一个下划线

    今天弄了一下CI框架,大概看了一下文档,感觉CI框架非常精简,但是在做的时候遇到了问题,CI文档中提供了一个新闻系统的例子,所有工作都做完了,在浏览器中打开相对应的url是,却显示“服务器错误”,一点 ...

  8. 新一代记事本“Notepad++”个性化设置备份

    Notepad++是一套非常有特色的自由软件的纯文字编辑器(许可证:GPL),有完整的中文化接口及支援多国语言撰写的功能(UTF8 技术).它的功能比 Windows 中的 Notepad(记事簿)强 ...

  9. Android AChartEngine 个性化设置

    AChartEngine的确是一个强大的图标引擎,但文档写得不是很详细,很多设置只能通过方法名推测和实际尝试,下面是一些自己在实际中遇到的需要设置的选项,常见的那些和通过方法名就能轻松猜到的就不赘述了 ...

随机推荐

  1. 初学者之 Git 和 Github

    git和github是两个完全不同的概念. git   是一个版本管理工具,是可以在你电脑不联网的情况下,只在本地使用的一个版本管理工具,其作用就是可以让你更好的管理你的程序,比如你原来提交过的内容, ...

  2. 02 Django框架基础（APP的创建访问）

    一.创建项目 1.命令:django-admin startproject sitename 2.IDLE环境:本质上都是执行上述命令 常用命令: python manage.py runserver ...

  3. python数据类型之字符串(str)和其常用方法

    字符串是有序的,不可变的. 下面的例子说明了字符串是不可变的 name = 'alex' name = 'Jack' """ 并没有变,只是给name开启了一块新内存,储 ...

  4. Kubernetes(k8s)底层网络原理刨析

    目录 1 典型的数据传输流程图 2 3种ip说明 3 Docker0网桥和flannel网络方案 4 Service和DNS 4.1 service 4.2 DNS 5 外部访问集群 5.1 外部访问 ...

  5. POJ：3020-Antenna Placement（二分图的最小路径覆盖）

    原题传送:http://poj.org/problem?id=3020 Antenna Placement Time Limit: 1000MS Memory Limit: 65536K Descri ...

  6. MiniProfiler监控调试MVC5以及EntityFramework6性能

    想要通过在MVC中view中直观的查看页面加载以及后台EF执行情况,可以通过MiniProfiler小工具来实现. 但是从网上搜索的相关信息要么是MVC4下的老版本的MiniProfiler,要么就是 ...

  7. HDU 4348 To the moon 主席树

    题意: 给出一个长度为\(n(n \leq 10^5)\)的序列,最开始时间\(t=0\),支持下面几个操作: \(C \, l \, r \, d\):将区间\([l,r]\)每个数都加上\(d\) ...

  8. luogu2053 [SCOI2007]修车

    把m个师傅拆成n个阶段,考虑每个人选上第某个阶段的某师傅对答案做出的贡献. 参见这里与那里. #include <iostream> #include <cstring> #i ...

  9. poj2449 Remmarguts' Date K短路 A*

    K短路裸题. #include <algorithm> #include <iostream> #include <cstring> #include <cs ...

  10. FCKeditor自定义编辑区CSS样式

    在网站后台使用FCKeditor编辑器的时候,见到的效果可能并不完全是”所见即所得”的,因为如果在FCKeditor编辑区中使用了前台样式表中的样式,在编辑区中并不能把这些样式显示出来.解决这个问题的 ...