Vue+Element+Select获取选中的对象

         

案例演示:获取select当前选中的所有内容

1 <el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="currentSel">
2    <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
3 </el-select>
 1       options: [
 2         {
 3           value: "选项1",
 4           id: 1,
 5           code: "xuanxiang1",
 6           label: "黄金糕"
 7         },
 8         {
 9           code: "xuanxiang2",
10           id: 2,
11           value: "选项2",
12           label: "双皮奶"
13         },
14         {
15           id: 3,
16           value: "选项3",
17           code: "xuanxiang3",
18           label: "蚵仔煎"
19         },
20         {
21           value: "选项4",
22           id: 4,
23           code: "xuanxiang4",
24           label: "龙须面"
25         },
26         {
27           value: "选项5",
28           label: "北京烤鸭",
29           id: 5,
30           code: "xuanxiang5"
31         }
32       ],
1 currentSel(selVal) {
2       this.code = selVal.code;
3       this.name = selVal.label;
4       console.log("选择的name为:" + this.name, "选择的code为:" + this.code);
5       console.log(selVal);
6     },

若有不明白请加群号:复制 695182980 ,也可扫码,希望能帮助到大家。

原文地址:https://www.cnblogs.com/CinderellaStory/p/10562390.html

时间: 2024-10-01 07:07:21

Vue+Element+Select获取选中的对象的相关文章

Revit 二次开发 获取选中的对象

领导脑瓜一拍,决定结合Revit开发产品,俺可惨了,两眼一抹黑,在他拍脑袋前,俺连Revit是什么.干嘛用的都不知道,硬着头皮上吧.老了,脑瓜不好使了,学过的在这里做个笔记 1 //获取选中对象 2 3 [TransactionAttribute(Autodesk.Revit.Attributes.TransactionMode.Manual)] 4 public class getSelectEle : IExternalCommand 5 { 6 7 public Result Execut

vue中select默认选中

<div id="app"> <!-- 选择一个 --> <select name="abc" id="" v-model="fruits"> <option value="" >请选择</option> <option value="苹果">苹果</option> <option value=&q

tableview获取选中cell对象

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath]; }

js获取select标签选中的值

var obj = document.getElementByIdx_x("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jQuery中获得选中select值 第一种方式$('#testSelect option:selected').t

vue中select的使用以及select设置默认选中

简介 今天写pc端引入vue,遇到了一个问题,就是我循环出select内的数据以后,发现原本默认显示第一条的select框变成了空白,要选择后才有显示,结果查了好多文档,讲的都不是很清楚,后来看到一句提示,试了一下发现居然还有这种隐藏属性.所以,我决定自己写下来,讲清楚. 解决过程 html代码如下,通过v-model可以获取到选中的值,如果option中存在value属性,优先获取value值即coupon.id,如果不存在,则获取option的文本内容,也就是下面代码中coupon.name

获取和设置select的选中项的值

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>获取select的选中项的值</title> </head> <body> <select id="select0"> <option value="0">请选择选项&l

js获取select标签选中的值及文本

原生js方式: var obj = document.getElementByIdx_x("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jquery方式: 第一种方式$('#testSelect option:selected').te

循环获取某个class下的多个select的选中值

//循环获取某个class下的多个select的选中值 function eachSelect(cla){ var val = ""; $("."+cla).each(function(){ $(this).find("select").each(function(){ var xm = $(this).children("option:selected").html(); var rybh = $(this).childre

Jquery获取html中select,radiobutton选中的值写法

1.Html代码: <select name="" class="qixian" id="tbCheckCycleUnit"> <option value="1">天</option> <option value="2">月</option> <option value="3">年</option> &l