在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 有用的脚本函数
May 07 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
js性能优化技巧
Nov 29 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
Preload基础使用方法详解
Feb 03 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 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
Terran建筑一览
2020/03/14 星际争霸
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
cookie的secure属性详解
2015/04/08 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
Python 关于反射和类的特殊成员方法
2017/09/14 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
pandas重新生成索引的方法
2018/11/06 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
内容编辑个人求职信
2013/12/10 职场文书
出国留学担保书
2014/05/20 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
长江七号观后感
2015/06/11 职场文书
病房管理制度范本
2015/08/06 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python