获取多个select选中值

业务背景:页面动态生成月数据列表,点击保存,将日期,星期,标识传至后台

DOM结构

在这里插入图片描述

页面生成的数据列表

在这里插入图片描述

传至后台的数据格式:

在这里插入图片描述
使用element中的select选择器没有实现,因为el-select中v-model是动态绑定,没办法将日期对应具体的数据,因而采用jquery实现,如果小伙伴们有好的方式,还望不吝赐教●▽●
页面代码

<table class="gridtable">
       <tr>
           <th colspan="100">{{getWeeksByDateAll.con}}</th>
       </tr>
       <tr >
           <td>日期</td><td style="width: 20px;" v-for="item in weeksData" :key="item.date">{{item.date}}</td>
       </tr>
       <tr>
           <td >星期</td><td  v-for="item in weeksData">{{item.week}}</td>
       </tr>
       <tr >
           <td>标示</td>
           <td v-for="(item,index) in weeksData" :key="index">
               <select :name="item.date" :data-week="item.week" class="classMarkSel" >
                   <option v-for="(itemflag,indexflag) in listClassMarksData" :key="indexflag" :value="itemflag.dictCode">
                       {{itemflag.dictContent}}
                   </option>
               </select>
               
           </td>
       </tr>
   </table>
保存事件
 var addList = [];
 var dictCodeList = [];//上班标识集合
 var datelineList = [];//日期选择集合
 var weekList = [];//星期集合
 var tempObj = {};
  $(".classMarkSel").each(function(i,item){
     console.log("zm111--", $(this).val());
     console.log("zm122--", $(this).attr("data-week"));
     console.log("zm133--", $(this).attr("name"));
     dictCodeList.push($(this).val())
     datelineList.push($(this).attr("data-week"))
     weekList.push($(this).attr("name"))
 });
 for(let i =0;i<dictCodeList.length;i++){
     addList[i] = {};
     addList[i].dictCode = dictCodeList[i]
 }
  for(let i =0;i<datelineList.length;i++){
      addList[i].dateline = datelineList[i]
 }
  for(let i =0;i<weekList.length;i++){
      addList[i].week = weekList[i]
 }
  console.log("zm1addList11--",addList);

在这里插入图片描述

拼接完成结果:

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值