在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 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
js实现双人五子棋小游戏
May 28 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
初品cakephp 入门基础
2012/02/16 PHP
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
PHP简单字符串过滤方法示例
2016/09/04 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
js实现的折叠导航示例
2013/11/29 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
Python 不同对象比较大小示例探讨
2014/08/21 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
Python输出带颜色的字符串实例
2017/10/10 Python
Python延时操作实现方法示例
2018/08/14 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
几个Shell Script面试题
2014/04/18 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
农民工讨薪标语
2014/06/26 职场文书
企业趣味活动方案
2014/08/21 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
详解Python flask的前后端交互
2022/03/31 Python