Vue2_两个下拉框之间进行联动

已于 2024-01-26 15:04:49 修改
阅读量1.2k 收藏 6
点赞数 2
文章标签： javascript vue.js
于 2023-01-01 11:42:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rainbow_bead/article/details/128511321
版权

应用场景：当A下拉框有值时，才能带出B下拉框对应的值

思路：监听A下拉框，在监听事件中，调B下拉框接口

（如下图：当“资产类别”有值时，才能显示“设备类型”下拉框中的值 ==》在“资产类别”监听事件中，调用“设备类型”的接口即可）

Rainbow_bead
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的vue三级联动下拉框代码
06-11
一款简单的基于vue实现的三级联动下拉框代码，适用于各种三级联动下拉菜单选择功能。
Vue 实现二个下拉框的联动
好记性，不如烂键盘。
09-24 1194
Vue 实现二个下拉框的联动。
VUE下拉框双向联动
热门推荐
程序大视界
04-01 1万+
VUE实现多个下拉框双向联动效果
Vue.js 2.0中select级联下拉框实例
10-20
在网上搜索了Vuejs2.0 动态级联select许久未果，决定自己总结一下自己的经验，有关select在Vue.js 2.0版本中的应用，需要的朋友可以参考下
实现两级下拉框的联动
weixin_30383279的博客
03-31 443
1.实现两级下拉框的联动。 功能：实现点击年级下拉框，加载对应科目的下拉框。 第一步：首先要加载年级下拉框中的数据。 01.在GradeDAL层（数据访问层）写一个方法，查询所有年级的信息。 /// <summary> /// 从数据库中获取年级信息 /// </summary> /// <re...
vue 联动下拉框
凡尘
06-13 1859
下拉框联动
vue实现两个el-select下拉框联动效果
qiqisix的博客
05-27 3653
只有一个list，多数文章中都是两个list实现联动。
vue中实现两个下拉列表动态联动
ʚ北慕南辞ɞ的博客
06-30 1417
首先，这是一个我自以为的骚操作，但其实后来想想实现起来其实很简单，但是它惊艳到了我，那我就记录一下；就像对象并不是很漂亮，但是她就是…，就是一拳打在…，打在…，打在了我的心巴上，所以就喜欢上了。
Vue.js仿Select下拉框效果
10-15
主要为大家详细介绍了Vue.js仿 Select下拉框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue组件实现可搜索下拉框扩展
08-27
主要为大家详细介绍了vue组件实现可搜索下拉框的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ajax_实现下拉框的联动（详细注释）
12-01
Ajax_实现下拉框的联动效果（详细注释） 有源码程序
下拉框值触发另一个下拉框
12-12
一个下拉框的值被选中后，触发另一个下拉框状态为可选！ 若值为空则为不可选！
vue3_dev_tools.crx
12-19
vue3_dev_tools插件
基于vue.js中关于下拉框的值默认及绑定问题
01-19
一、今天遇到vue中下拉框问题，故而写点东西留个脚印 <select v-model='selected' @click=disable()> (option,index) v-bind:value=option.value disabled=option.disabled> {{ option.text }}{{index}}{...
ASP.NET——实现两个下拉框动态联动
weixin_30311605的博客
08-11 1346
引入： 在网页中，我们经常会遇到下图中的情况。首先在下拉框中选择所在的省，选择之后，第二个下拉框会自动加载出该省中的市。这样设计极大的方便了用户的查找。那这是如何实现的呢？ 1、建立数据库 “省”表 “市”表 2、添加控件 3、两个下拉框分别绑定数据源 protected void Page_Load...
基于vue下拉框n级联动
weixin_47970316的博客
04-26 3177
基于vue实现下拉框的n级联动
vue实现多个下拉框联动（一）
最新发布
温暖前端的博客
02-17 940
这样，当选择一个选项时，其他下拉框的选项列表和选中值就会根据选择的选项进行更新，实现了多个下拉框的联动效果。的值发生变化时，可以根据选择的选项更新其他下拉框的选项列表，并重置其他下拉框的选中值。，用于保存下拉框的选中值。然后，定义多个选项列表。要实现Vue3中多个下拉框的联动，可以使用。函数创建了多个响应式的变量。指令将下拉框的选中值与。
两个下拉框联动的实现
qq_43681933的博客
11-11 1282
两个下拉框联动的实现 1.只写一个查询 var flag = '{#flag#}'; app.info(flag); if(flag == '0'){ /* 个人 */ app.output('select t.item_name AS D,T.item_code AS V from rdm.t_dict_entry t where t.dict_code = \'DM1304\' and T.ITEM_CODE = \'1\' '); }else if(flag == '1'){ /* 机构 */
两个下拉框的联动功能实现
管子（zero）的杂乱空间
11-11 2397
new document 开始时间 13:00 13:30 14:00 14:30 15:00 15:30 16:00 16:30 17:00 17:30 18:00 18:30 19:00 19:30 20:00 20:30 21:30 21:00 22:30 22:00 23:00 结束时间 13:00 13:30 14:00 14:30 15:00 15
vue两个下拉框联动
06-01
实现两个下拉框联动的方法有很多，以下是一个基于 Vue 的示例： HTML 代码： ``` <div id="app"> <label for="province">省份：</label> <select id="province" v-model="selectedProvince"> <option v-for="province in provinces" :value="province">{{ province }}</option> </select> <label for="city">城市：</label> <select id="city" v-model="selectedCity"> <option v-for="city in cities" :value="city">{{ city }}</option> </select> </div> ``` JavaScript 代码： ``` new Vue({ el: '#app', data: { provinces: ['北京', '上海', '广东'], cities: { '北京': ['北京市'], '上海': ['上海市'], '广东': ['广州市', '深圳市', '珠海市'] }, selectedProvince: '', selectedCity: '' }, watch: { selectedProvince: function(val) { this.selectedCity = ''; } }, computed: { filteredCities: function() { return this.cities[this.selectedProvince]; } } }); ``` 代码解释： 1. `provinces` 是一个数组，存储所有省份的名称。 2. `cities` 是一个对象，存储每个省份对应的城市数组。 3. `selectedProvince` 和 `selectedCity` 是两个双向绑定的变量，分别表示当前选中的省份和城市。 4. 在 `watch` 选项中，当 `selectedProvince` 发生变化时，将 `selectedCity` 置空，以防止用户选择了一个省份后，城市下拉框中还显示上一个省份的城市。 5. 在 `computed` 选项中，使用 `selectedProvince` 获取当前选中的省份对应的城市数组，存储在 `filteredCities` 中，用于在城市下拉框中显示正确的选项。 6. 在 HTML 中，使用 `v-for` 指令遍历 `provinces` 和 `filteredCities` 数组，动态生成省份和城市下拉框中的选项。 7. 在省份和城市下拉框中，使用 `v-model` 指令将选中的值与 `selectedProvince` 和 `selectedCity` 双向绑定，以实现联动效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值