用div模拟select

文章目录
  1. 1. 前言
  2. 2. select日期选择
    1. 2.1. html
    2. 2.2. js
  3. 3. div日期选择
    1. 3.1. html
    2. 3.2. scss
    3. 3.3. js
    4. 3.4. 效果图
  4. 4. 源码
  5. 5. 后记

前言

四不四傻?有select不用,干嘛要用div来模拟select呢?下面来看一个问题:

请问不使用chosen等插件,也不使用div模拟select,通过html和css,有没有办法限制select下拉框的高度。默认显示20条option,我想改成5条该怎么处理?

答案是,无解!使用插件?找了十几款selectbox插件,都不满意!要么封装起来麻烦,要么根本不提供限制下拉框长度的功能。

评估了一下,还是自己模拟一个select选择框更靠谱。

select日期选择

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="birthday">
<label>生日:</label>
<select name="month" id="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>月
<select name="day" id="day">
</select>日
</div>

js

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
$('#month').change(function(){
changeDay();
});

function changeDay(){
var $day = $('#day');
var month = $('#month').val();
var data = [];
if(month==2){
for (var i = 1; i <= 29; i++) {
data.push(i);
}
}else if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
for (var i = 1; i <= 31; i++) {
data.push(i);
}
}else if(month==4 || month==6 || month==9 || month==11){
for (var i = 1; i <= 30; i++) {
data.push(i);
}
}
var html = '';
data.forEach( function(element, index) {
html += '<option value='+element+'>'+element+'</option>';
});
$day.html(html);
$day.find('option').first().checked;
}

div日期选择

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
<div class="birthday2">
<label>生日:</label>
<div class="simulate-select" id="month-box">
<input class="input" name="month2" type="hidden" value="1">
<div class="check">1</div>月
<ul class="items">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div class="simulate-select" id="day-box">
<input class="input" name="day2" type="hidden" value="1">
<div class="check">1</div>日
<ul class="items">
</ul>
</div>
</div>

scss

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
.simulate-select{
position: relative;
display: inline-block;
.check{
display: inline-block;
width: 40px;
text-align: center;
border: 1px solid #333;
}
.items{
display: none;
list-style: none;
position: absolute;
top: 100%;
left: 0;
height: 100px;
overflow-y: auto;
margin: -1px 0 0 0;
padding: 0;
width: 40px;
text-align: center;
border: 1px solid #333;
background: #fff;
li{
&.active{
background: #eee;
color: #fff;
}
}
&.active{
display: block;
}
}
}

js

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
selectMonth2();
changeDay2();
selectDay2();

function selectMonth2(){
var self = this;
var $month = $('#month-box');
$('#month-box').on('click','.check',function(event){
$('#day-box').find('.items').removeClass('active');
if($month.find('.items').hasClass('active')){
$month.find('.items').removeClass('active');
}else{
$month.find('.items').addClass('active');
}
event.stopPropagation();
});
$('#month-box').on('click','li',function(){
var month = $(this).html();
$month.find('.input').val(month);
$month.find('.check').html(month);
$month.find('.items').removeClass('active');

changeDay2();
});
$(document).click(function(){
$month.find('.items').removeClass('active');
});
}

function changeDay2(){
var $month = $('#month-box');
var $day = $('#day-box');
var month = $month.find('.input').val();
var data = [];
if(month==2){
for (var i = 1; i <= 29; i++) {
data.push(i);
}
}else if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
for (var i = 1; i <= 31; i++) {
data.push(i);
}
}else if(month==4 || month==6 || month==9 || month==11){
for (var i = 1; i <= 30; i++) {
data.push(i);
}
}
var html = '';
data.forEach( function(element, index) {
html += '<li>'+element+'</li>';
});
$day.find('.items').html(html);
$day.find('.check').html('1');
}

function selectDay2(){
var $day = $('#day-box');
$('#day-box').on('click','.check',function(event){
$('#month-box').find('.items').removeClass('active');
if($day.find('.items').hasClass('active')){
$day.find('.items').removeClass('active');
}else{
$day.find('.items').addClass('active');
}
event.stopPropagation();
});
$('#day-box').on('click','li',function(){
var day = $(this).html();
$day.find('.input').val(day);
$day.find('.check').html(day);
$day.find('.items').removeClass('active');
});
$(document).click(function(){
$day.find('.items').removeClass('active');
});
}

效果图

源码

https://github.com/voidking/nodebase/blob/master/views/weixin/love.html
https://github.com/voidking/nodebase/blob/master/public/scss/weixin/love.scss
https://github.com/voidking/nodebase/blob/master/public/js/weixin/love.js

后记

我相信,一定有更简单的方法实现限制select下拉框的高度。如果在调试时,可以捕捉到下拉框,就可以设置该下拉框的高度了。但是,尝试了各种办法都没有捕捉到,奇怪。不管了,暂时这样,以后发现了更好的解决办法再补上。