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

最新推荐文章于 2024-08-21 09:01:24 发布
最新推荐文章于 2024-08-21 09:01:24 发布
阅读量2.7w 收藏 4
点赞数
分类专栏： Vue element-ui cascader 文章标签： Vue Vue下拉框获取值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/andy5520/article/details/90691254
版权
在Vue中，可以通过两种方式获取下拉框（el-cascader）的文本和值。方法1：利用ref属性，通过`this.$refs['cascaderAddr'].currentLabels`获取文本，`this.$refs['cascaderAddr'].currentValue`获取值。方法2：为下拉框和文本框定义id，然后使用`document.getElementById()`来获取值。
摘要由CSDN通过智能技术生成

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

最低0.47元/天 解锁文章
andy5520
关注
专栏目录
在Vue 中获取下拉框的文本及选项值操作
01-19
方法1： <!-- element表单组件 --> <!-- <el-input v-model.number=rul
vue 获取下拉框选中的值
Liber_Y的博客
05-17 4443
<template> <div class=""> <select @change="getEventType($event)"> <option v-for="option in list" :key="option.value" :id="option.value" :name="option.name" > </option>
如何在Vue3中自定义下拉框组件，创建一个美观的下拉选择框，支持自定义选项
最新发布
有我更精彩的博客
08-21 660
在现代前端开发中，下拉框（下拉选择框）是用户界面中一种常见的交互元素。它允许用户从一组预定义选项中选择一个值。虽然HTML原生的<select>标签能够实现这个功能，但如果我们想要一个更美观、更加灵活的下拉框，创建一个自定义组件是一个更好的选择。本文将通过使用Vue 3的setup语法糖来实现这一目标。
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获取下拉框值
weixin_30708329的博客
08-01 7746
vue获取下拉框的值，用vue-modle,只有点击下拉框的值才会赋值到下拉框中，初始时下拉框没有数据，而改用$event就不会出现这样的问题，下面看代码以及图解： v-model解决方式： <!-- 下拉框 --> <div v-show="moreStore" class="select"> 　　<select class="choice" v-on:ch...
vue拿到下拉框el-select的选择项的value和label
weixin_53339757的博客
06-28 4842
vue实现同时拿到下拉框的值和名称
vue项目获取下拉框选中id_在Vue 中获取下拉框的文本及选项值操作
weixin_39740737的博客
12-18 1955
方法1：:model="ruleForm"label-position="right"ref="ruleForm" // 被ref 标记的status-iconsize="small"inline:rules="rules"label-width="150px"class="demo-ruleForm">:options="productsDataOptions"v-model="rule...
vue项目获取下拉框选中id_vue获取下拉框值
weixin_39552204的博客
12-18 5582
vue获取下拉框的值，用vue-modle,只有点击下拉框的值才会赋值到下拉框中，初始时下拉框没有数据，而改用$event就不会出现这样的问题，下面看代码以及图解：v-model解决方式：{{item.name}}下拉框的值：index: [{"indexId":1,"name": "点菜用户数"}, {"indexId":2,"name": "点菜新用户数"}, {"indexId":3,"na...
基于vue.js中关于下拉框的值默认及绑定问题
10-18
在Vue.js中，下拉框（Select）的值默认及绑定是常见的数据交互...通过以上步骤，你可以创建一个具有默认值和动态功能的Vue下拉框组件。注意在实际应用中，确保所有变量和方法都有正确的定义和引用，以避免运行时错误。
Vue 下拉框获取数据
Mr_aswl的博客
09-09 6510
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 Element中Select下拉框选取值的问题
08-27
下面小编就为大家分享一篇浅谈Vue Element中Select下拉框选取值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue select 获取value和lable操作
10-14
主要介绍了vue select 获取value和lable操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue.js获取被选择的option的value和text值方法
12-29
如下所示： 1.获取option的value的值，watch option 控件时，或自动获取option的value的值。 2.获取被选中的option的text的值时,使用：$(“#optionID option:selected”).text 拓展知识：select标签如何传递选中option的value值与text值方法 如下所示： <select name=type onchange=show_sub(this.options[this.options.selectedIndex].value)> 请选择主菜名 <o
Vue获取下拉框中选中的value值和label值
Vanllen_moon的博客
04-11 9026
前提： 使用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 === th
vue下拉框 获取选中的值
weixin_42327537的博客
10-24 7586
<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 实现表单下拉框 --- 并且获取其中的值
北芒的博客
06-18 3659
说明 使用到了 v-model 指令 开始使用 获取下拉表单中的值 原理就是直接绑定 type 里面的值利用双向绑定的原理实现 <div id="app"> <select v-model="type"> //框里面的值会随着 type 值的变化而变化（关键） <option value="1">一---1</option> <option value.
vue获取select下拉框的值和文本（Key,Value）
热门推荐
小码哥
06-19 4万+
话不多说，解决问题是关键，直接开干： html: <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">型号</label> <div class="layui-input-inline" sty...
vue3 vben下拉框数据接口获取
weixin_45924208的博客
10-19 662
【代码】接口获取下拉框数据。
vue如何获取下拉框中选中值的label和key
06-01
在 Vue 中，通过 `v-model` 绑定下拉框的选中值，可以直接获取选中项的 value。如果想要获取选中项的 label 和 key（即选项的文本和 value 对应的属性名），可以通过下拉框的 `options` 数组来获取。 假设我们有一个下拉框，其中的选项是一个 JSON 数组，每个选项都有一个 `id` 和 `name` 属性，我们可以这样获取选中项的 label 和 key： ```html <template> <div> <select v-model="selectedOption"> <option v-for="option in options" :value="option.id">{{ option.name }}</option> </select> <p>你选择了选项 {{ selectedOption }}，它的名称是 {{ selectedOptionName }}，它的 key 是 {{ selectedOptionKey }}</p> </div> </template> <script> export default { data() { return { options: [ {id: 1, name: '选项1'}, {id: 2, name: '选项2'}, {id: 3, name: '选项3'} ], selectedOption: null } }, computed: { selectedOptionName() { // 通过 selectedOption 获取选中的选项的名称 const selectedOption = this.options.find(option => option.id === this.selectedOption) return selectedOption ? selectedOption.name : '' }, selectedOptionKey() { // 通过 options 和 selectedOption 获取选中的选项的 key const selectedOption = this.options.find(option => option.id === this.selectedOption) return selectedOption ? Object.keys(selectedOption)[1] : '' } } } </script> ``` 在上面的示例中，我们通过计算属性 `selectedOptionName` 和 `selectedOptionKey` 分别获取选中项的 label 和 key。在计算属性 `selectedOptionName` 中，我们使用 `Array.prototype.find()` 方法根据选中的 `id` 获取对应的选项，最终返回选项的名称。在计算属性 `selectedOptionKey` 中，我们同样使用 `Array.prototype.find()` 方法根据选中的 `id` 获取对应的选项，然后通过 `Object.keys()` 方法获取选项对象的属性名数组，最终返回属性名数组的第二个元素，即选项的 key。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值