select联动框清除上一次选择时的数据

’遇到的问题:新增数据时下拉框中应该为无数据状态,但仍然保留着上次选择时的数据(左右选择框为联动关系)。如图在这里插入图片描述
解决的办法:
在新增按钮响应事件中清除数据,代码参考如下

$('.add-btn button').on('click',function () {
    $("[name='RECORDID']").val("");
    $("#T2201").select2("val", "");
    $("#T2209").select2("val", "");
    $("#T2209").val("");
    $("#T2209").html("");
    $('.pop-bg,.add-pop').fadeIn();
})

在这里插入图片描述
T2201:前框id, T2209:后框id
结果:
在这里插入图片描述

在 Vue3 中,结合 Element Plus 组件库创建动态添加的二级联动 `el-select` 具有不允许重复选择的功能,可以按照以下步骤进行: 1. 首先,安装 Element Plus 和相关的依赖: ```bash npm install element-plus @vue/cli-plugin-element-plus ``` 2. 然后,在 Vue 组件中设置数据结构,用于存储选项并跟踪已选的值,例如: ```js <template> <div ref="selectWrapper"> <!-- 动态生成的 el-select --> </div> </template> <script> export default { data() { return { options: [], // 顶级选项 subOptions: {}, // 子级选项对象,key为顶级选项的 value,value为子选项数组 selectedItems: {}, // 已选择的项,key为顶级选项的 value,value为对应的子选项值 }; }, // ...其他生命周期钩子和方法 }; </script> ``` 3. 创建一个方法来动态添加新的 `el-select`,并将选择绑定到 `selectedItems`: ```js methods: { addSelect(parentId) { const newSelect = this.$createElement('el-select', { v-model: null, placeholder: '请选择', clearable: true, // 清除按钮 multiple: false, // 一级联动默认单选 filterable: true, }); // 添加下拉列表 const subOptionsList = this.subOptions[parentId] || []; subOptionsList.map(subOption => { newSelect.append( `<el-option :label="${subOption.label}" :value="${subOption.value}"></el-option>` ); }); // 添加新 select 到 dom this.$refs.selectWrapper.append(newSelect); // 监听新选中的子选项 newSelect.addEventListener('select', (e) => { if (!this.selectedItems[parentId]) { this.selectedItems[parentId] = {}; } this.selectedItems[parentId][e.value] = e.value; }); }, }, // 初始化添加第一个 select mounted() { const firstOption = this.options.find(option => option.parentId === undefined); if (firstOption) { this.addSelect(firstOption.id); } }, </script> ``` 4. 使用,通过数据驱动的方式控制哪些选项可以添加,以及初始化是否需要自动添加第一个 select
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六眼飞鱼...

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值