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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
Javascript writable特性介绍
Feb 27 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
基于js中document.cookie全面解析
Sep 14 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
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
支持oicq头像的留言簿(一)
2006/10/09 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
javascript自定义加载loading效果
2020/09/15 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python Django批量导入数据
2016/03/25 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
Python实现简单猜数字游戏
2021/02/03 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
财产公证书格式
2014/04/10 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
企业文化学习心得体会
2016/01/21 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Python机器学习之基础概述
2021/05/19 Python