-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
56 lines (55 loc) · 2.67 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单模拟select</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
body{ padding: 50px;}
/*dsSelect style*/
.dsselect_menu{ display: inline-block; position: relative; width: 95px; line-height: normal; text-align: left; font-size: 0; font-size: 16px; background-color: #fff; }
a.dsselect_switch{ border: solid 1px #dadada; display: block; text-decoration: none; cursor: pointer; height: 38px; line-height: 38px; overflow: hidden;}
a.dsselect_switch label{ display: block; cu rsor: pointer; word-wrap: normal;word-break: normal; overflow: hidden;text-overflow: ellipsis; margin-left: 10px; margin-right: 25px;}
a.dsselect_switch i{ position: absolute; right: 10px; top: 50%; margin-top: -2.5px; display: inline-block; width: 0; height: 0; border:solid 5px transparent; border-top-color: #c6c6c6;}
a.dsselect_switch:hover{}
.dsselect_data_con{ display: none; position: absolute; top: 100%; margin-top: -1px; left: 0; z-index: 1; min-width: 100%;}
.dsselect_menu.open .dsselect_data_con{ display: block;}
.dsselect_data_list{ max-height: 150px; min-height: 2em; overflow-x: hidden; overflow-y: auto; border: 1px solid #d9dadc; background-color: #fff; font-size: 16px;}
.dsselect_data_list li{ line-height: 1.5em;}
.dsselect_data_list li a{ display: block; text-decoration: none; line-height: 2em; margin: 0 10px;}
.dsselect_data_list li:hover{ background-color: #eee;}
.frm-txt{ display: inline-block; vertical-align: top; height: 40px; line-height: 40px; padding: 0px 6px;}
.dsselect_menu.disabled{ background-color: #e3e3e3;}
.dsselect_menu.disabled label{ color: #bbb;}
</style>
</head>
<body>
<div>下拉列表：</div>
<!--select-->
<div class="dsselect_menu ">
<a class="dsselect_switch" href="javascript:;">
<label></label>
<i></i>
</a>
<div class="dsselect_data_con ">
<ul class="dsselect_data_list">
<li><a href="javascript:;" data-value="1" >第1个</a></li>
<li><a href="javascript:;" data-value="2" >第2个</a></li>
<li><a href="javascript:;" data-value="3" >第3个</a></li>
<li><a href="javascript:;" data-value="4" >第4个</a></li>
</ul>
</div>
<input type="hidden" class="js-input-hidden" value="">
</div>
<!--select end-->
<script src="src/jquery-1.8.0.min.js"></script>
<script src="src/jquery.dsselect.min.js"></script>
<script>
$(".dsselect_menu").dsSelect({
onChange:function(){
console.log("选择的是:"+$(this).text());
}
});
</script>
</body>
</html>