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

 <el-select v-model="value8" filterable placeholder="请选择" value-key="id" @change="currentSel">
<el-option v-for="item in options" :key="item.id" :label="item.label" :value="item"></el-option>
</el-select>
       options: [
{
value: "选项1",
id: 1,
code: "xuanxiang1",
label: "黄金糕"
},
{
code: "xuanxiang2",
id: 2,
value: "选项2",
label: "双皮奶"
},
{
id: 3,
value: "选项3",
code: "xuanxiang3",
label: "蚵仔煎"
},
{
value: "选项4",
id: 4,
code: "xuanxiang4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭",
id: 5,
code: "xuanxiang5"
}
],
 currentSel(selVal) {
this.code = selVal.code;
this.name = selVal.label;
console.log("选择的name为:" + this.name, "选择的code为:" + this.code);
console.log(selVal);
},

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

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

  1. vue操作select获取option值

    如何实时的获取你选中的值 只用@change件事 @change="changeProduct($event)" 动态传递参数 vue操作select获取option的ID值 如果 ...

  2. select获取选中的option(包含value和text,重点是text怎么获取)

    简单描述:后台需要获取到select标签选择的内容,也就是text,该怎么取呢?很简单. 代码: //hml代码<div class="col-md-6"> <l ...

  3. JQuery/JS select标签动态设置选中值、设置禁止选择 button按钮禁止点击 select获取选中值

    //**1.设置选中值:(根据索引确定选中值)**// var osel=document.getElementById("selID"); //得到select的ID var o ...

  4. vue element select多选回显

    我们经常在使用 Element组件里面的 select多选 场景:添加账号的时候需要选择可见分公司(分公司为多选),添加成功之后可以编辑,需要回显添加时所提交的分公司 代码如下: 多选框: data( ...

  5. 使用layui框架的select获取选中的值

    在使用时需要注意:select标签的外层需要加上类名".layui-form" 接下来就是根据需求来改变下拉框的内容了,直接给select的option重新赋一次值,记得加上对应的 ...

  6. select获取选中项的值与文本

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. select 获取选中option的值方法,选中option方法

    options=$("#Select option:selected"); options.attr('name');options.val(); options.text(); ...

  8. 获取select标签选中状态 的label的值。

    <select name="procode" onchange="alert(this.options[this.selectedIndex].text)" ...

  9. 使用JavaScript获取select元素选中的value和text

    示例代码如下(js直接写在了html里面,没有写在一个单独的外部文件中): <!DOCTYPE html> <html> <head> <meta name= ...

随机推荐

  1. webdriver.chrome()禁止加载图片

    from selenium import webdriver chrome_options = webdriver.ChromeOptions() prefs = {"profile.man ...

  2. JQuery小知识

    一.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { retu ...

  3. CentOS6.5 切换 图形界面 与 命令行界面

    CentOS6.5 切换图形界面与命令行界面 [1]场景1:图形界面 -> 命令行界面 方式一(快捷键):Ctrl + Alt + F2 方式二(终端命令):init 3 (PS:init与3之 ...

  4. spring-boot 2.1.2.RELEASE bug

    不打印映射地址日志: 改用 2.0.5 RELEASE 即可

  5. Navicat Premium 简体中文版 12.0.16 以上版本国外官网下载地址(非国内)

    国内Navicat网址是:http://www.navicat.com.cn 国外Navicat网址是:http://www.navicat.com 国外的更新比国内的快,而且同一个版本,国内和国外下 ...

  6. 在自定义目录下,按日期创建excel文件

    在指定文件目录下,新建以当前日期命名的excel 文件,如果文件已经存在,在文件中新建一个sheet页来存放数据 import datetime import xlrd, xlwt import re ...

  7. centos安装图形界面

    1.首先安装X(X Window System),命令为  yum groupinstall "X Window System"   回车 2.由于这个软件组比较大,安装过程会比较 ...

  8. JS运算符、NaN

    一.关系运算符  (< <= > >= == === != !==) 判断符号左右的两个数据的大小之间的关系,运算结果是一个布尔类型的值 ==   只判断值 ===即判断值并且 ...

  9. radhat6.6上安装oracle12c RAC (二)

    二.GI(Grid Infrastructure)安装 首先将安装包传到node1的目录 2.1 GI软件安装 2.1.1.解压安装包 #su - grid解压 GRID 到 GRID用户的$ORAC ...

  10. Developing Vert.x Modules using the Standard Project

    The module The tests Unit tests Integration tests Java integration tests JavaScript integration test ...