1、需求描述
当标识选中为“班”时,将选中的标记颜色,标识栏使用了多个select下拉框
2、页面效果
3、
页面
<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,index) in weeksData" :class="(item.week=='周六'||item.week=='周日')?'lightColor':'blue'" :key="index">{{item.week}}</td>
</tr>
<tr>
<td>标示</td>
<td v-for="(item,index) in weeksData" :key="index">
<select :id="'selec'+item.date" :name="item.date" :data-week="item.week" class="classMarkSel" @change="a($event,index,item.date)" >
<option v-for="(itemflag,indexflag) in listClassMarksData" :key="indexflag"
:value="itemflag.dictCode" :class="itemflag.dictCode == '20' ?'lightColor':'blue'" >
{{itemflag.dictContent}}
</option>
</select>
</td>
</tr>
methods中方法
a(event, index,selDate,dictCodem) {
var myselect=document.getElementById("selec"+selDate);
var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
if(myselect.options[index].text == '班'){
var geth1 = document.getElementById("selec"+selDate);
geth1.style.background="#CCFFFF"
}
}
一、 javascript原生方法
1、拿到select对象: var myselect = document.getElementById('ID');
2、拿到选中的索引: var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3、拿到选中的option的value: myselect.options[index].value;
4、拿到选中项options的text: myselect.options[index].text;
二、 jQuery 方法
1、var options = $("#ID option:selected");//获取选中的值
2、options.val(); //选中的值
3、options.text(); //选中的文本