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

select多选框的整体思路是：将被选中的值连成字符串后赋值给某标签（以input、div标签为例）即可，下面会进行详细说明。
ps：PC端和移动端的js代码写的不太一样，但是原理是一样的（因为第一个是我写的，另一个是别人写的…）。

整体效果图：

一、select多选框在PC端的表现，类似于下拉框，可自己调整宽高，需要配合Ctrl键进行多选。为了宽高不规整影响页面样式，可对option进行定位并隐藏，点击某标签的时候才显示。

PC端效果图：

html代码截图：

html代码复制区：

房型
 

         
         
       		  一房一厅
       		  一厨一卫
        	 三房三房三房
        	 三房一厅
         
          
  

说明：
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端的说明）

											
												
												一房一厅
												一厨一卫
												三房三房三房
												三房一厅
												
											
											
请选择
										
                                        

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