前端 react+antd select二级联动问题√

最新推荐文章于 2024-02-06 10:49:53 发布

ToBeBetterAlice

最新推荐文章于 2024-02-06 10:49:53 发布

阅读量1.2k

点赞数

分类专栏：学习文章标签：前端

本文链接：https://blog.csdn.net/ToBeBetterAlice/article/details/118675905

版权

学习专栏收录该内容

5 篇文章

订阅专栏

博客讨论了在前端开发中遇到的二级联动选择问题，例如在省份和城市的选择中，选择北京市后，再次选择山东省时市级仍显示为北京。解决方案是在省级单位改变时，通过`form.setFieldsValue`方法清空市级选择，确保正确更新下拉菜单的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、问题
select二级联动时，出现了如下问题
比如省份的二级联动
北京市——北京
山东省——济南、泰安
当选择北京市北京之后，如果再选择山东省时，此时市级单位仍然是北京

2、解决
在省级单位变化的时候，同时设置如下内容，可以清空市级单位的选择
form.setFieldsValue({‘Form.Item的name’: ’ '});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ToBeBetterAlice

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React---javascript(两个下拉列表的级联选择功能（联动菜单））

qq_41279327的博客

04-07

2238

练习：实现两个下拉列表的级联选择功能（联动菜单）省市联动即可：例如：第一个下拉列表有选项：北京、河北、山东当选中北京时，第二个下拉列表中显示：顺义、朝阳、海淀、丰台当选中河北时，第二个下拉列表中显示：石家庄、廊坊、保定、秦皇岛当选中山东时，第二个下拉列表中显示：济南、青岛、日照、东营 <!DOCTYPE html> <html lang="zh"&gt...

react select、option标签实现省市联动

JxufeCarol的博客

03-27

2160

中国省市数据 “北京市”,[“北京市”], “天津市”,[“天津市”], “河北省”,[“石家庄市”, “唐山市”, “秦皇岛市”, “邯郸市”, “邢台市”, “保定市”, “张家口市”, “承德市”, “沧州市”, “廊坊市”, “衡水市”], “山西省”,[“太原市”, “大同市”, “阳泉市”, “长治市”, “晋城市”, “朔州市”, “晋中市”, “运城市”, “忻州市”, “临汾市”...

参与评论您还未登录，请先登录后发表或查看评论

解决Antd 里面的select 选择框联动触发的问题

01-22

有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。但是现在的问题是这样的：触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被清空。解决办法：使用Select 里面的value属性，来进行清空 <Form style={{padding:'20px','boxSizing':'border-box'}}> <Select defaultValue={packag

简单的用React+antd实现简单Select 下拉多级联动；

alonesupermen的博客

07-15

5627

##用React+antd实现简单Select 下拉多级联动； 1. 首先看state内的值 this.state = { select:[] , //1级下拉内容 select2:[], // 2级下拉内容 status:true, //2级禁用状态 select3:[], //3级下拉内容 select4:[], //4级下拉内容 } 2. -利用 comp

react 利用select编写省市级三级联动

xiaoxiaofly的博客

09-26

3885

以下是代码（实现的代码部分） selectProvience:'',//变化选中的省份 selectNextProvience:'',//变化选中的市级单位 provienceInfo:[],//获取省份信息 provienceNextInfo:[],//获取省份的下一级信息 provienceNextsInfo:[],//获取县级信息 // 获取省市县 getAddr...

移动端 react + antd-mobile 二级联动（一二级均多选）

cs_dnm的博客

09-30

2216

移动端 react + antd-mobile 二级联动（一二级均多选）前提：数据结构为树形结构（二级数据带一级ID）功能说明：默认展示一级下拉菜单，选完一级之后，二级的列表数据为选好的所有一级的二级数据，最后点确定之后，展示全部的选择（包括一级和二级）。展示出来的部分可以删除及全部删除。

React+Antd实现省、市区级联下拉多选组件（支持只选省不选市）

最新发布

陌上花开然不归矣

02-06

2590

react+antd+实现省、市区级联下拉多选组件

react+ts+antd实现全选/反选操作

杜小白的博客

07-12

2050

最近在项目中遇到这样一个需求，在list中模拟全选/反选操作，总结以下三个关键步骤： 1. 给list中每一个元素定义一个checked变量，控制当前元素是否勾选； 2. 定义全选checkbox的change函数，为true则遍历list中所有元素，将其checked置为true，反之，置为false； 3. 定义list中单个checkbox的change函数，控制list中当前元素是否勾选，同时判断全选是否应该勾选； importReact,{useState}from'reac...

【React】手写Antd Select联动效果组件

qq_53512708的博客

08-12

2954

但是这个联动的例子是写死的，无法通过配置的形式直接生成（即传入后台请求回来的需要联动的数据直接生成两个甚至三个四个联动的select），组件复用性不强，并且当表单提交的时候无法获取到两个select组件的value。1. 生成如下的数据结构，使得除了第一个select，其他的select依赖上一个select选中的value。3.从props中获取Form.Item中的提供的onChange方法，当下拉框选项改变的时候调用。3.如何在表单提交时也可以获取到所有select组件的value？...

react项目使用了 Ant Design等需要三级联动的省市区资源库

11-26

let cityData = { "RECORDS": [ { "value": 110000, "label": "北京", "children": [{ "value": 110100, "label": "北京", "children": [{ "value": 110101, ...Ant Design组件三级联动资源库必备

如何使用 react + antd 实现后台管理系统的二级菜单

关注我！带你一路 "狂飙" 到底！

12-16

1529

一、效果介绍话不多说，咱们先来上一张图看看效果二、准备工作 1、创建项目 npx create-react-app my-react-admin 2、安装需要的依赖 npm i antd -S 3、创建项目基本结构 my-react-admin public src api banner.js nav.js pro.js user.js components // 公共组件 layout // 布局结构 main // 主界面结构

React实现列表联动

qq_36590338的博客

04-09

1654

函数类别：

React项目中使用 Ant Design - form实现简单Select 下拉多级联动

z611739的博客

11-15

2706

React项目中使用 Ant Design - form实现简单Select 下拉多级联动可接受form控制

[Vue2]AntDesignVue基于Select封装「多选 + 二级级联+ 可自定义添加item 组件」

SCUhzs

05-17

7964

[Vue2]AntDesignVue基于Select封装「多选 + 二级级联+ 可自定义添加item 组件」

ant react design select不支持搜索

weixin_39818813的博客

01-05

455

搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。若通过 options 属性配置选项内容，建议设置 optionFilterProp=“label” 来对内容进行搜索。

Ant Design React中 Form.Item 中设置Select，Input.TextArea，Input默认值

v5666666的博客

12-30

2119

Ant Design React中 Form.Item 中设置Select，Input.TextArea，Input默认值

React+Ts左右二级联动

m0_64387562的博客

06-29

305

React+Ts左右二级联动，详情

Axios 的两种使用方法简单示例

luzhaopan的博客

08-27

5472

在编写文件代码的过程中，往往需要请求后台的数据，下面介绍一下 Axios 方法的简单使用 1、直接使用，以下代码为在Vue文件中的 methods 方法中定义的获取后台数据的方法 methods: { // 连接后台获取数据的方法 getData () { let params = { lt: '20180411', ...

antd select多选_antd多选下拉框一行展示的实现方式

weixin_32955455的博客

03-03

6316

我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。下面有2种方案来实现这个效果。1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。.ant-select-selection--multiple {max-height: 32px;overflo...

antd的select二级联动

05-18

antd的Select组件可以通过设置`onSelect`事件和动态改变`options`属性来实现二级联动。假设我们有以下数据： ```js const options = [ { label: '北京', value: 'bj', children: [ { label: '海淀区', value: 'hd', }, { label: '朝阳区', value: 'cy', }, ], }, { label: '上海', value: 'sh', children: [ { label: '浦东新区', value: 'pd', }, { label: '徐汇区', value: 'xh', }, ], }, ]; ``` 我们需要在Select组件中，选中第一级选项后，动态的更新第二级选项。实现的代码如下： ```jsx import React, { useState } from 'react'; import { Select } from 'antd'; const { Option } = Select; const options = [ { label: '北京', value: 'bj', children: [ { label: '海淀区', value: 'hd', }, { label: '朝阳区', value: 'cy', }, ], }, { label: '上海', value: 'sh', children: [ { label: '浦东新区', value: 'pd', }, { label: '徐汇区', value: 'xh', }, ], }, ]; function CascadingSelect() { const [cities, setCities] = useState(options[0].children); const handleCityChange = (value) => { const city = options.find((item) => item.value === value); setCities(city.children); }; return ( <div> <Select defaultValue={options[0].value} style={{ width: 120 }} onSelect={handleCityChange}> {options.map((option) => ( <Option key={option.value} value={option.value}> {option.label} </Option> ))} </Select> <Select style={{ width: 120 }} defaultValue={cities[0].value}> {cities.map((city) => ( <Option key={city.value} value={city.value}> {city.label} </Option> ))} </Select> </div> ); } export default CascadingSelect; ``` 在这个例子中，我们在第一个Select组件中设置了`onSelect`事件，当选中北京或上海时，会触发`handleCityChange`函数，动态的更新第二个Select组件中的选项。