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);
});