<!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. Electron的介绍

    1.1 Electron是什么? 引用官网的一句话: Build cross platform desktop apps with JavaScript, HTML, and CSS 1.2 诞生 技 ...

  2. 遍历Map的两种方式

    取出map集合中所有元素的方式一:keySet()方法. 可以将map集合中的键都取出存放到set集合中.对set集合进行迭代.迭代完成,再通过get方法对获取到的键进行值的获取. Set keySe ...

  3. 强制类型转换(int)、(int&)和(int*)的区别

    我们先来看两行代码: float x=1.75,y=1.75; cout<<(int)x<<" "<<(int&)y<<en ...

  4. NOIP2016——一个逗号引发的血案

    今年江西省报名人数一下子增起来了 隔壁中学来了80+人(虽然都是来给我们垫底的...临时被老师抓来上战场 总之我们赛区参赛人数总算多起来了(起码没再减50%...连续4年减50%真不是随便说说的... ...

  5. jsp内置对象及其方法

    JSP中一共预先定义了9个这样的对象,分别为:   request.   response.   session.   application.   out.   pagecontext.   con ...

  6. XML映射文件中关系映射

    映射(多)对一.(一)对一的关联关系 1).使用列的别名 ①.若不关联数据表,则可以得到关联对象的id属性 ②.若还希望得到关联对象的其它属性.则必须关联其它的数据表 1.创建表: 员工表: DROP ...

  7. Monkeyrunner 简介及其环境搭建

    Monkeyrunner是通过坐标.控件ID和控件上的文字操作应用的界面元素,其测试用例是用python写的,这样就弥补了monkey只有简单命令无法执行复杂用例的缺陷.Monkeyrunner采用的 ...

  8. LA 6538 Dinner Coming Soon DP

    题意: 给出一个有\(N\)个顶点\(M\)条有向边的图,起点为\(1\),终点为\(N\). 每条边有经过的时间,和经过这条边的花费.一开始你有\(R\)元钱,要在\(T\)时间内赶到终点去约会. ...

  9. HDU 5402 模拟 构造 Travelling Salesman Problem

    题意: 有一个n * m的数字矩阵,每个格子放着一个非负整数,从左上角走到右下角,每个格子最多走一次,问所经过的格子的最大权值之和是多少,并且输出一个路径. 分析: 如果n和m有一个是偶数的话,那么只 ...

  10. Python中的魔法函数__repr__和__str__的实质性区别

    str 和 repr 方法:是自定义类的字符串描述,这两种都是比较 Pythonic 的方式去控制对象转化为字符串的方式. 调用这两个方法,返回的都是字符串.但是这两个方法又有一些区别 ** 1 两种 ...