select多选框的整体思路是:将被选中的值连成字符串后赋值给某标签(以input、div标签为例)即可,下面会进行详细说明。
ps:PC端和移动端的js代码写的不太一样,但是原理是一样的(因为第一个是我写的,另一个是别人写的…)。
整体效果图:
一、select多选框在PC端的表现,类似于下拉框,可自己调整宽高,需要配合Ctrl键进行多选。为了宽高不规整影响页面样式,可对option进行定位并隐藏,点击某标签的时候才显示。
PC端效果图:
html代码截图:
html代码复制区:
<div>房型</div>
<div class="item-input">
<input type="text" placeholder="请选择" readonly required>
<select id="sel-huxing" name="" multiple onchange="huxingChange()">
<option value="">一房一厅</option>
<option value="">一厨一卫</option>
<option value="">三房三房三房</option>
<option value="">三房一厅</option>
</select>
<i class="fa fa-caret-down"></i>
</div>
说明:
1)multiple:是让select可以多选的属性,不写这个则默认单选;
2)onchange事件:会在域的内容改变时发生,使用 onchange 事件在用户改变输入域的内容时执行 JavaScript 代码;
3)i.fa:是黑色的倒三角小图标,详见:http://fontawesome.dashgame.com/ 。
js代码截图:
js代码复制区:
//户型多选框的值
function huxingChange(){
var array = [];
$("#sel-huxing option").not(function(){ return !this.selected }).each(function (){
array.push($(this).text());
})
$('#tz-huxing input').val(array);
}
二、select多选框在移动端的表现,一般情况下点击会弹出一个弹出框,可直接进行多选。
移动端效果图:
html代码截图:
html代码复制区:(代码说明详见PC端的说明)
<div for="sel-housing" class="sel-box">
<select id="sel-housing" name="" multiple >
<optgroup label="选择房型">
<option value="" >一房一厅</option>
<option value="">一厨一卫</option>
<option value="">三房三房三房</option>
<option value="">三房一厅</option>
</optgroup>
</select>
<div class="housing-label">请选择</div>
</div>
<i class="fa fa-caret-down"></i>
js代码截图:
js代码复制区:
//房源类型多选框的值
$('#sel-housing').change(function() {
var s = $(this).find('option').not(function(){ return !this.selected }).map(function() {
return $(this).text();
}).get().join(',');
s = s||'请选择';
$(this).parent().find('.housing-label').html(s);
});