码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-07-22 22:39:12      阅读:258      评论:0      收藏:0      [点我收藏+]

标签: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.展示

bubuko.com,布布扣

工作需求----表单select多选交互,布布扣,bubuko.com

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

标签:style   blog   color   os   strong   io   

原文地址:http://www.cnblogs.com/ninali/p/3861093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!