在Vue 中获取下拉框的文本及选项值操作

方法1：

<!-- element表单组件 -->
<el-form
:model="ruleForm"
label-position="right"
ref="ruleForm"  // 被ref 标记的
status-icon
size="small"
inline
:rules="rules"
label-width="150px"
class="demo-ruleForm"
>
<el-form-item class="addProductA b" label="产品名称" prop="productKind">
<!-- <el-input v-model.number="ruleForm.productKind" maxlength="11" :disabled="isScan" placeholder="请输入产品名称"></el-input> -->
<el-cascader
:options="productsDataOptions"
v-model="ruleForm.productKind"
:disabled="isScan"
style="width:300px;"
size="small"
clearable
placeholder="试试搜索：指南"
filterable
ref="cascaderAddr" // 被ref 标记的
@change="handlerSelectProductsWithUnit"
:show-all-levels="false"
></el-cascader>

以上的Form 表单 及其嵌套的联级下拉框都被ref标记 之后形成了refs的组件集合

添加监视可以获取当前的refs集合中包含表单ruleForm及cascaderAddr 两个组件集合

下拉框所选择值value =v-model="ruleForm.productKind" 可以获取 或者使用

var text=this.$refs['cascaderAddr'].currentLabels
var value =this.$refs['cascaderAddr'].currentValue

方法2：

给下拉框或者联级菜单下拉框定义id

this.printInfos.transportDate=document.getElementById('transportDate').value; // 下拉框取值方式
this.printInfos.productKindName=document.getElementById("productKind").innerText; // 文本框取值方式

补充知识：VUE element-ui下拉列表获取label值

有这样一个场景，当我们往后台数据传的是id时，我们却想在前台获取列表显示的值，这时候可以用下面的方法来获取你想要的label值

let obj = {};
    obj = this.arr.find((item) => {
     return item.id === value;
    });

然后就可以从obj获取你想要的值了

以上这篇在Vue 中获取下拉框的文本及选项值操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件实践之可搜索下拉框功能

    vue组件实践之可搜索下拉框功能

    之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下. 效果图: 子组件 DROPDOWN.VUE <template> <div class="vue-dropdown default-theme"> <div class="cur-name" :class="isShow ? 'show':''" @click="isShow =! isShow">{{itemli

  • Element Dropdown下拉菜单的使用方法

    组件- 下拉菜单 基础用法 <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</

  • vue实现的下拉框功能示例

    vue实现的下拉框功能示例

    本文实例讲述了vue实现的下拉框功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue下拉框</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js

  • 解决vue动态下拉菜单 有数据未反应的问题

    问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料 发现 Vue的this理解有误 jsp 下拉菜单 <select name="plantModelParentId" v-model="vueObj.plantModelParentId" @change="selectChange"> <option value=""></option> <option v-fo

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • Dojo获取下拉框的文本和值实例代码

    Dojo Dojo是一个用javascript语言实现的开源DHTML工具包.它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a"unified"toolkit的原因.Dojo的目标是解决开发DHTML应用程序遇到的那些,长期存在.历史问题(historical problems with DHTML).跨浏览器问题. 1.问题背景 这里有一个下拉框,其中选项为一年四季,选中后打印下拉框的值和文本 2.实现源码 <!DOCTYP

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • Vue + Element-ui的下拉框el-select获取额外参数详解

    直接上代码吧~ <el-table-column label="用户类型" width="180"> <template slot-scope="scope"> <el-select v-model="scope.row.roleID" placeholder="请选择" @change="changeRole($event,scope)"> <

  • 在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)

    最近工作中碰到一个需求,添加一条数据时,自动记住上次选择的下拉框的数据,刚开始觉得没思路,后来请教了项目组长,组长直接一句,这不很简单吧,直接用cookie,我:....... 好吧,都王的差不多了,于是经过一番百度实践,测试,总算是可以了,接下来就说说实践以及一些坑! 开发环境: webpack+vue+java后台 要实现这个小功能,其实只需要在vue中写相应的功能就可以了,并不需要在后台写什么,但是如果写的不正确,后台也是会报错的,代码如下: 先把这几个方法写上,删除的看需求决定需不需要:

  • Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    背景 最近在使用Bootstrap table ,有一个在某一列添加一个下拉列表,并且通过 "getAllSelections"方法获取所选行的需求,在实现这个功能的时,走了一些弯路,遇到了一些坑.所以今天总结出来,既是自己的学习,也分享给大家,希望能够有些帮助. 如何解决 添加这个下拉列表有以下两种方法: 利用Column options 中的 formatter 将数据转换成下拉列表的形式 使用bootstrap-table拓展中的editable插件 这次主要介绍第一种,基本的思

  • 基于vue.js中关于下拉框的值默认及绑定问题

    一.今天遇到vue中下拉框问题,故而写点东西留个脚印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled"> {{ option.tex

  • vue Treeselect 树形下拉框:获取选中节点的ids和lables操作

    API: https://vue-treeselect.js.org/#events 1.ids: 即value 1.lable: 需要用到方法:@select(node,instanceId) 和 @deselect(node,instanceId) <template> <treeselect ref="DRHA_EFaultModeTree" v-model="DRHA_EFaultModeTree_value" :multiple=&quo

  • vue.js select下拉框绑定和取值方法

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

  • VUE多个下拉框实现双向联动效果

    本文实例为大家分享了VUE多个下拉框实现双向联动的具体代码,供大家参考,具体内容如下 一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样.本文讲解VUE页面中,多个下拉框如何实现双向联动效果. 二.代码示例 2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12"

随机推荐