Vue获取下拉框中选中的value值和label值

最新推荐文章于 2023-06-28 22:20:39 发布
最新推荐文章于 2023-06-28 22:20:39 发布
阅读量8.5k 收藏 22
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vanllen_moon/article/details/115599713
版权

前提：
使用v-for循环渲染选择项，如下图例子
例子中allVillage为数组，每个数组元素是对象，对象中含有id和name
例子

:value与v-model的值是互相绑定的，可以在data中定义变量进而直接获取到

例子
如图，可以通过this,paneOneForm.villageId拿到value中绑定的id值

获取选中的文本值，即label值，结合使用数组的find方法

let obj = {}
obj = this.allVillage.find((item) => item.id === this.paneOneForm.villageId)
this.paneOneForm.villageName = obj.name

此处paneOneForm.villageName即下拉框选中的文本label值

Vanllen_moon
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue下拉框 获取选中的值
weixin_42327537的博客
10-24 7399
<template> <div> <!-- 下拉框获取value值 --> <el-select v-model="query" @change="selectChanged"> <el-option v-for="item in options" :key="item.value" :value="item" :label="item.label"></el-option&gt
vue.js实现单选框、复选框和下拉框示例
01-19
Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下边以单选框、复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式。 一、单选框   在传统的HTML中实现单选框的方法如下： <input type=radio name=gender value=man id=man/>男 <input type=radio name=gender value=woman id=women/>女</lab
vue实现select下拉显示隐藏功能
12-30
今日，怂怂就来说说，在项目中刚遇到这么一个功能需求； 描述：当下拉选择不同的属性选项，需展示对应的内容界面； select下拉菜单如下： 当下拉选择【表结构变更】、即展示如下界面： 当下拉选择【接口变更】、即展示如下界面： 代码实现 vue.js： //定义一个select下拉菜单 <el-option label=接口变更 va
解决element-ui的下拉框有值却无法选中的情况
01-18
问题描述： 在使用Vue框架和element-ui开发时，下拉框遇见一个问题，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。（踩坑踩得莫名其妙） 代码段： <el v-model=value placeholder=请选择 change=change()> <el v-for=item key=item.value label=item.label value=item.value></el> </el>
vue select 获取value和lable操作
01-21
vue select控件在选择时需要把id和name两个值都获取到，实现方案如下： select控件代码 <FormItem label=物资类型： prop=supplyType> <Select v-model=detailData.supplyType :label-in-value=true placeholder=请选择物资类型 @on-change=getVendorId> <Option v-for=item in supplyTypeList :value=item.id :key=item.id :labl
vue + element + select 获取下拉框的 label 和 value 值（ 例如 绑定的是 id ， 但后台要求即传 id ，又要传 id 对应的 name ）
H5爱好者
12-14 4549
1、为什么要获取 Select(选择器) 选中的 label 的 id 和 name 等属性： 从后台传过来的数据，想让它显示在 Select 选择器的栏中，并想动态获取所选中的 label 值的 id 与 name 等属性值，以备后用；
vue 获取下拉框选中的值
Liber_Y的博客
05-17 4258
<template> <div class=""> <select @change="getEventType($event)"> <option v-for="option in list" :key="option.value" :id="option.value" :name="option.name" > </option>
Vue获取下拉框中的值
光头强的博客
01-19 1万+
一、获取含有默认省的下拉框中的name值 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;script src
Vue 下拉框获取数据
Mr_aswl的博客
09-09 6400
Vue 使用数据网上很多方法都需要使用到路由器 但是我不太会，于是自己写了一个小组件也可以起到获取数据库数据并返回到 Vue 下拉框的作用 <template> <div class="demo"> <el-select v-model="queryParams" @change="selectPlatform($event)"> <el-option v-for="(item,index) in timeList" :key="ind
vue拿到下拉框el-select的选择项的value和label
最新发布
weixin_53339757的博客
06-28 3975
vue实现同时拿到下拉框的值和名称
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
01-21
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=true :options=DRHA_EFaultModeTree_options :flat=true
vue中elementUi的el-select同时获取value和label的三种方法
热门推荐
PJL13411055804的博客
10-31 3万+
本文介绍了在vue中el-select想要同时获取value和label的三种方法
【Vue】el-select 获取当前选中对象
_修铁路的、的博客
12-31 8366
el-select 获取当前选中对象
Vue获取下拉框的选中值以及下标
GongWei_的博客
12-10 9378
<select class="select" v-on:change="indexSelect($event)" v-model="pcNum"> <option v-for="(item, index) in pcArr" :key="index" v-bind:value="item.pcNum">{{ item.pcNum }}</option> </select> js： data() { return { pcNum:'PC20200
vue 下拉框选择获取对应值的整个数据
HouMengFei_的博客
04-11 2287
find函数是用于在数组中查询对象的功能，该函数是用于在数组中查找一个满足制定条件的一个对象，如果没有则返回undefined。使用find函数来进行对应id数据的查找。
ServletContext对象：域对象（共享数据）、MIME类型
Alla
11-23 282
概念：代表整个web应用，可以和程序的容器(服务器)来通信 获取： 通过request对象获取 request.getServletContext(); 通过HttpServlet获取 this.getServletContext(); (两种方法都可以获取servletcontext对象，只不过我们一般用第二种) 功能： 获取MIME类型： MIME类型:在互联网通信过程中定义的一种文件数据类型 格式： 大类型/小类型 text/html image/jpeg 获取：String getMime
Vue element中select下拉框name和value都传给后台
li22356的博客
01-21 4868
最近遇到一个小问题select下拉框的value和name都要传递给后台 解决方案如下： 首先写一个chang事件 <el-select v-model="bpmData.typeCode" placeholder="请选择所属分类类型" clearable @change="majorChange($event)"> <el-option v-for="item in typeArray" :key="item.id" :label="item.name"
Vue 中获取下拉框的文本及选项值
andy5520的博客
05-30 2万+
方法1： <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="d...
获取下拉框的value以及文本的值
Aurora_____的博客
09-17 5258
@殷桃小狗子 获取下拉框的value以及文本的值 在做项目的时候，遇到页面搜索以及省市联动获取值后在其他input输入框显示。 这是效果： 这是HTML代码： 测试获取下拉框的value以及文本值 <select id="place" name="place"> <option value="...
vue下拉框获取选中值的所有信息
04-22
你可以使用v-model指令将下拉框与选中值绑定，然后通过事件监听获取选中值的相关信息。例如： ``` <template> <div> <select v-model="selectedOption" @change="getSelectedOptionInfo"> <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option> </select> </div> </template> <script> export default { data() { return { selectedOption: '', options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, ], }; }, methods: { getSelectedOptionInfo() { const selectedOptionValue = this.selectedOption; const selectedOptionLabel = this.options.find((option) => option.value === selectedOptionValue).label; console.log(`选中的值为：${selectedOptionValue}，选中的选项为：${selectedOptionLabel}`); }, }, }; </script> ``` 在上面的代码中，我们先将下拉框与选中值绑定到`selectedOption`属性上，然后在`<select>`标签上监听`change`事件，调用`getSelectedOptionInfo()`方法获取选中值的相关信息。在`getSelectedOptionInfo()`方法中，我们首先获取选中的值，然后通过`Array.prototype.find()`方法在选项数组中查找选中值对应的选项，从而获取选中选项的`label`属性。最后将选中值和选项的`label`打印出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值