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


Posted in Javascript onAugust 13, 2020

方法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

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

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

方法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 中获取下拉框的文本及选项值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript库 开发规则
Jan 31 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JavaScript window.location对象
Nov 14 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
js实现一个简易计算器
Mar 30 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 #Javascript
Postman参数化实现过程及原理解析
Aug 13 #Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 #Javascript
vue路由分文件拆分管理详解
Aug 13 #Javascript
Postman环境变量全局变量使用方法详解
Aug 13 #Javascript
vue 实现把路由单独分离出来
Aug 13 #Javascript
vue项目接口域名动态获取操作
Aug 13 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
php通用防注入程序 推荐
2011/02/26 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
YII框架常用技巧总结
2019/04/27 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JS跨域总结
2012/08/30 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
python logging类库使用例子
2014/11/22 Python
python多线程用法实例详解
2015/01/15 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
桥梁工程专业求职信
2014/04/21 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书