首页 > 代码库 > 工作需求----表单select多选交互

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

2024-07-13 11:26:29   211人阅读

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


联系
我们