在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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
Smarty Foreach 使用说明
2010/03/23 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php计算整个目录大小的方法
2015/06/01 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
总结一些js自定义的函数
2006/08/05 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
python爬取网页转换为PDF文件
2018/06/07 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
linux面试题参考答案(4)
2013/01/28 面试题
初中班主任经验交流材料
2014/05/16 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
红色经典观后感
2015/06/18 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python