Original link:
https://www.mk2048.com/blog/blog.php?id=h02a0jhk0c1j&title=%E6%A8%A1%E6%8B%9Fselect%E6%8E%A7%E4%BB%B6%E5% 8A% 9F% E8% 83% BD
Directly on the code
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>模拟select控件功能</title>
9 <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
10 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
11 <style>
12 * {
13 margin: 0;
14 padding: 0;
15 }
16 .model_wrap{
17 position: relative;
18 margin: 10px;
19 width: 200px;
20 line-height: 30px;
21 font-size: 14px;
22 }
23
24 .model_wrap>input{
25 box-sizing: border-box;
26 padding: 0 10px;
27 width: 100%;
28 height: 30px;
29 border: 1px solid #000;
30 border-radius: 5px;
31 }
32
33 .model_wrap>i{
34 position: absolute;
35 right: 5px;
36 top: 5px;
37 }
38
39 .model_wrap>ul{
40 display: none;
41 position: absolute;
42 right: 0;
43 top: 30px;
44 width: 100%;
45 background: #fff;
46 border: 1px solid #c7a055;
47 border-radius: 2px;
48 }
49
50 .model_wrap>ul>li {
51 list-style: none;
52 height: 30px;
53 text-indent: 10px;
54 }
55 </style>
56 </head>
57
58 <body>
59 <div class="model_wrap">
60 <input type="text" value="请选择..." readonly="readonly">
61 <i class="fa fa-sort-desc fa-lg"></i>
62 <ul>
63 <li>我的名字是？</li>
64 <li>我的出生地址是？</li>
65 <li>我的生日是？</li>
66 </ul>
67 </div>
68 <script>
69 $(".model_wrap>input").click(change)
70 $(".model_wrap>i").click(change)
71 function change(){
72 if ($(".model_wrap>ul").css('display') == 'none') {
73 $(".model_wrap>ul").show();
74 } else {
75 $(".model_wrap>ul").hide();
76 }
77 }
78
79
80 $(".model_wrap>ul li").click(function () {
81 $(".model_wrap>input").val($(this).text())
82 $(".model_wrap>ul").hide();
83 }).mouseover(function () {
84 $(this).css({
85 "background": "#1e90ff",
86 "color": "#fff",
87 'cursor': 'pointer'
88 })
89 }).mouseout(function () {
90 $(this).css({
91 "background": "#fff",
92 "color": "#000"
93 })
94 })
95 </script>
96 </body>
97
98 </html>
More professional front-end knowledge, make the [2048] ape www.mk2048.com