antd Select下拉菜单动态添加option里的内容操作


Posted in Javascript onNovember 02, 2020

antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值

提供一个公共的方法,每次只需去调用这个方法就行了

//这里是示例数据格式
let giftScope =[
 {
 code:200,
 id:1,
 name:"张三"
 }, {
 code:300,
 id:2,
 name:"李四"
 }, {
 code:400,
 id:3,
 name:"王五"
 }, {
 code:500,
 id:4,
 name:"赵六"
 },
]
// 提供了一个在select里面添加公用Option内容的方法 
//第一个参数为原数据(array) 
//第二个为value----值为当前输入框内容对应的id或code唯一标识(不能为number会报错) 
//第三个为内容
 const renderOption = (arr , code , name) => arr ? arr.map( (item,index)=>{
 return (<Option key={index+item[code]} value={ typeof(item[code]) === 'number' ? item[code].toString() : item[code]}>{item[name]}</Option>)
 }) : null
 <Select mode="tags" >{renderOption(giftScope,'id','name')}</Select>

配合form表单使用

//parameter可以是id,也可以是code或者其他需要的字段,调用renderOption方法时更改第二个参数即可
//通过form表单API获取到所有value值的parameter就为绑定的id或者code
   <Form.Item>
   {getFieldDecorator('parameter', {
    rules: [{ required: false, message: '请选择' }],
     })(
    <Select mode="tags" >{renderOption(giftScope,'id','name')}</Select>,
    )}
   </Form.Item>

补充知识:关于antd Select选择器

根据服务器端的值动态渲染 select的option值

antd Select下拉菜单动态添加option里的内容操作

在moddels里面直接处理数据

*getSiteOptionsAdmin({ payload }, { call, put }) {
   try {
    const { data } = yield call(notice.getSiteOptionsAdmin, payload);
    if (data.code === 200) {
     const menudata = [];
     menudata.push(<Select.Option key={0} value="0">全部</Select.Option>);
     for (let i = 0; i < data.info.length; i++) {
      menudata.push(
       <Select.Option
        key={data.info[i].id}
        value={data.info[i].id.toString()}
       >
        {data.info[i].title}
       </Select.Option>,
      );
     }
     yield put({ type: 'save', payload: { getSiteOptionsAdmin: menudata } });
    } else {
     message.error(data.message);
    }
   } catch (error) {
    console.log(error);
   }
  },

全部选项就是value值为0 的option值

export default connect((state) => {
 return {
  activityList: state.activity.activityList,
  menudata: state.notice.getSiteOptionsAdmin,
 };
})(Form.create()(QuestionList));
<Select 
showSearch 
placeholder="请选择站点" 
style={{ width: '160px' }} 
optionFilterProp="children" 
onChange={this.handleChange}>
 <Option key={0} value={0}> 全部</Option>
 {this.props.menudata.length > 0 ? this.props.menudata : []}
</Select>,

以上这篇antd Select下拉菜单动态添加option里的内容操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
vue.js封装switch开关组件的操作
Oct 26 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 #Javascript
JavaScript实现刮刮乐效果
Nov 01 #Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 #Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 #Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 #Javascript
uni-app使用countdown插件实现倒计时
Nov 01 #Javascript
uni-app实现获取验证码倒计时功能
Nov 01 #Javascript
You might like
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
javascript cookies操作集合
2010/04/12 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
2018/09/27 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
python标准算法实现数组全排列的方法
2015/03/17 Python
python3个性签名设计实现代码
2018/06/19 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python numpy元素的区间查找方法
2018/11/14 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Python魔术方法专题
2020/06/19 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
轻化专业学生实习自我鉴定
2013/09/20 职场文书
单位创先争优活动方案
2014/01/26 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
大学生学习计划书
2014/09/15 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android