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 相关文章推荐
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
jQuery中prevUntil()方法用法实例
Jan 08 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
layui文件上传实现代码
May 20 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 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
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python基本语法经典教程
2016/03/11 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python登录注册验证功能实现
2018/06/18 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python如何输出整数
2020/06/07 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
应届生求职推荐信
2013/10/28 职场文书
岳父生日宴会答谢词
2014/01/13 职场文书
幼儿园安全责任书
2014/04/14 职场文书
2016新教师培训心得体会范文
2016/01/08 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
总结Python常用的魔法方法
2021/05/25 Python
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL