工作需求----表单select多选交互

由于工作需求接触select框多选的情况，以下是我分享的代码，主要是进入页面默认选中、支持多选属性：

1.html内容

multiple=”multiple” 属性为多选属性

<div class="c-n-survey-option">
     <select name="0" multiple=”multiple” class="c-n-survey-select" id="mySelect" >
          <option>年龄段</option>
          <option selected="selected">收入阶段</option>
          <option selected="selected">地域</option>
          <option>性别</option>
     </select>
 </div>  
 <div id="result"></div> <!--输出选中的内容-->

 

2.JQ代码

$("#mySelect").click(function () { //select多选的情况下选中的内容输出
      var res = '';
      for (var i = 0; i < $("#mySelect option:selected").length; i++) {
          var o = $("#mySelect option:selected")[i];
          res += $(o).attr("value") + " , ";
      }
      $("#result").html(res)
  });
  
  //进入页面默认选中
  $("#mySelect").change(function(){
      $(this).find("option:selected").text();
  });
  $("#result").html($("#mySelect").find("option:selected").text());
  

 

3.展示