工作需求----表單select多選互動

標籤：style   blog   color   os   strong   io   

由於工作需求接觸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.展示