<!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. iOS 骰子战争 Dice Wars

    占坑 这个游戏之前在网页端玩过,App Store 上没有搜到特别好的,想自己做个类似的iOS APP 游戏 目测实现难度适中,可玩性较高

  2. 数据结构算法与应用c++语言描述 原书第二版 答案（更新中

    目录 第一章 C++回顾 函数与参数 1.交换两个整数的不正确代码. 异常 10.抛出并捕捉整型异常. 第一章 C++回顾 函数与参数 1.交换两个整数的不正确代码. //test_1 void sw ...

  3. PAT 乙级 1086

    题目 题目地址:PAT 乙级 1086 思路 本题比较简单,但还是存在小小的坑点,简单说一下: 倒置中需要注意的唯一问题就是:100倒置后不是001,而是1:这个问题处理之后还要注意另一个点就是,10 ...

  4. 【数位dp】bzoj3131: [Sdoi2013]淘金

    思路比较自然,但我要是考场上写估计会写挂:好像被什么不得了的细节苟住了?…… Description 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1. ...

  5. Spring Boot 应用 快速发布到linux服务器的脚本代码示例

    前提说明:spring boot 应用打包成jar包之后要部署到Linux服务器上面运行,我用的nohup java -jar 命令,但是代码更新之后重新部署的时候覆盖原来的项目,又要手动运行ps - ...

  6. C++输入密码不显示明文

    之前有遇到需求说输入密码不显示明文,但同时会有一些其他问题,暂时没做,如今经过尝试可以实现,但是得先知道要输入的是密码.主要利用的getch()函数的不回显特点.需要注意的是这个函数不是标准函数,而且 ...

  7. LeetCode之Weekly Contest 101

    前一段时间比较忙,而且做这个对于我来说挺耗时间的,已经间隔了几期的没做总结了,后面有机会补齐.而且本来做这个的目的就是为了防止长时间不做把编程拉下,不在追求独立作出所有题了.以后完赛后稍微尝试下,做不 ...

  8. 【linux】【进程】stand alone 与 super daemon 区别

    本文引用自  鸟哥的linux私房菜如果依据 daemon 的启动与管理方式来区分,基本上,可以将 daemon 分为可独立启动的 stand alone , 与透过一支 super daemon 来 ...

  9. octave-basic

    在coursera上斯坦福的machine learning,lecturer极力推荐开源的编程环境Octave入手,所以我也下载了来试一试吧== 参考链接:http://www.linuxdiyf. ...

  10. HDU - 1864 最大报销额 （背包）

    题意: 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C类),要求每张发票的总额不得超过1000元,每张发票上,单项物品的价值不得超过600元.现请你编 ...