select多选框在移动端和PC端的不同表现

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