直接上代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <meta http-equiv="X-UA-Compatible" content="ie=edge">

   <title>模拟select控件功能</title>

   <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

   <style>

     * {

       margin: 0;

       padding: 0;

     }

     .model_wrap{

       position: relative;

       margin: 10px;

       width: 200px;

       line-height: 30px;

       font-size: 14px;

     }

     .model_wrap>input{

       box-sizing: border-box;

       padding: 0 10px;

       width: 100%;

       height: 30px;

       border: 1px solid #000;

       border-radius: 5px;

     }

     .model_wrap>i{

       position: absolute;

       right: 5px;

       top: 5px;

     }

     .model_wrap>ul{

       display: none;

       position: absolute;

       right: 0;

       top: 30px;

       width: 100%;

       background: #fff;

       border: 1px solid #c7a055;

       border-radius: 2px;

     }

     .model_wrap>ul>li {

       list-style: none;

       height: 30px;

       text-indent: 10px;

     }

   </style>

 </head>

 <body>

   <div class="model_wrap">

     <input type="text" value="请选择..." readonly="readonly">

     <i class="fa fa-sort-desc fa-lg"></i>

     <ul>

       <li>我的名字是？</li>

       <li>我的出生地址是？</li>

       <li>我的生日是？</li>

     </ul>

   </div>

   <script>

     $(".model_wrap>input").click(change)

     $(".model_wrap>i").click(change)

     function change(){

       if ($(".model_wrap>ul").css('display') == 'none') {

         $(".model_wrap>ul").show();

       } else {

         $(".model_wrap>ul").hide();

       }

     }

     $(".model_wrap>ul li").click(function () {

       $(".model_wrap>input").val($(this).text())

       $(".model_wrap>ul").hide();

     }).mouseover(function () {

       $(this).css({

         "background": "#1e90ff",

         "color": "#fff",

         'cursor': 'pointer'

       })

     }).mouseout(function () {

       $(this).css({

         "background": "#fff",

         "color": "#000"

       })

     })

   </script>

 </body>

 </html>

模拟select控件功能的更多相关文章

  1. 模拟select控件，css模拟下拉

    <!DOCTYPE html > <head>     <meta http-equiv="Content-Type" content="t ...

  2. 模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode

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

  3. jquery input 下拉框(模拟select控件)焦点事件

    本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...

  4. js+CSS实现模拟华丽的select控件下拉菜单效果

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

  5. JavaScript封装一个实用的select控件

    最近一直把精力放在项目上面,导致忽略的一些底层的东西.以前就一直觉得原有的select控件很丑,正好周末有时间,试着做了一个简单封装,实现了它的基本功能.我总结了一下,大概分为三个部分: 1.对显示样 ...

  6. 基于jquery的可查询多级select控件（可记录历史选择）

    一.功能和使用 公司有功能需求,还要一条代码引入的控件,网上找完全符合的控件比较难,寻找所花的时间还不如自己写一个,所以找个空闲时间自己写了一个   控件功能:1.可手动输入查询,也可点击下拉框查询, ...

  7. Jquery+json绑定带层次下拉框（select控件）

    一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...

  8. AnjularJS系列2 —— 表单控件功能相关指令

    第二篇,表单控件功能相关指令. ng-checked控制radio和checkbox的选中状态 ng-selected控制下拉框的选中状态 ng-disabled控制失效状态 ng-multiple控 ...

  9. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

随机推荐

  1. bzoj 1643: [Usaco2007 Oct]Bessie's Secret Pasture 贝茜的秘密草坪【枚举】

    4维枚举平方小于10000的数,相加等于n则ans++ #include<iostream> #include<cstdio> using namespace std; con ...

  2. [App Store Connect帮助]六、测试 Beta 版本（4.2） 管理 Beta 版构建版本：查看构建版本状态和指标

    必要职能:“帐户持有人”职能.“管理”职能.“App 管理”职能.“开发者”职能或“营销”职能.请参见职能权限. 在首页上,点按“我的 App”,选择您的 App,然后在工具栏中点按“TestFlig ...

  3. $CF55D [数位DP]$

    题面 数位DP+状压. 首先,按照数位DP的基本套路,每个个位数的最小公倍数为2520,所以只用考虑模2520的情况.考虑一个DP.dp[i][j][k]表示当前是第i位,2~9的数的集合为j,模25 ...

  4. ACM博弈论总结

    一.Bash博弈 1.问题模型:只有一堆n个物品,两人轮流从这堆物品中取物,最多取m个,最后取光者胜. 2.解决思路:当n=m+1时,由于一次最多取m个,无论先取者拿走多少个,后取者都能一次拿走剩余的 ...

  5. Hadoop Hive概念学习系列之hive的正则表达式初步（六）

    说在前面的话 hive的正则表达式,是非常重要!作为大数据开发人员,用好hive,正则表达式,是必须品! Hive中的正则表达式还是很强大的.数据工作者平时也离不开正则表达式.对此,特意做了个hive ...

  6. [转]MVC4项目中验证用户登录一个特性就搞定

    本文转自:http://www.mrhuo.com/Article/Details/470/A-Attribute-For-MVC4-Project-Used-To-Validate-User-Log ...

  7. NodeJs学习记录（一）初步学习，杂乱备忘

    2016/12/26 星期一 1.在win7下安装了NodeJs 1)进入官网 https://nodejs.org/en/download/,下载对应的安装包,我目前下载的是node-v6.2.0- ...

  8. PAT甲级考前整理（2019年3月备考）之一

       转载请注明出处:https://www.cnblogs.com/jlyg/p/7525244.html 终于在考前,刷完PAT甲级131道题目,不容易!!!每天沉迷在刷题之中而不能超脱,也是一种 ...

  9. html5 页面音频

    1. html5 样式 <audio class="audioleft download" id="audVoice" type="audio/ ...

  10. canvas一周一练 -- canvas绘制饼图（3）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...