首页 > 其他 > 详细

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

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

由于工作需求接触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多选交互

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!