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变量作用域及可访问性的探讨
Nov 23 Javascript
可以文本显示的公告栏的js代码
Mar 11 Javascript
JavaScript中的Screen屏幕对象
Jan 16 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
JavaScript 跨域之POST实现方法
May 07 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
生成sessionid和随机密码的例子
2006/10/09 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
对python中dict和json的区别详解
2018/12/18 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
String这个类型的class为何定义成final?
2012/11/13 面试题
几个Linux面试题笔试题
2012/12/01 面试题
平面设计的岗位职责
2013/11/08 职场文书
校长就职演讲稿
2014/01/06 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
大学新生军训感言
2014/02/25 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
销售团队获奖感言
2014/08/14 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
教师节校长致辞
2015/07/31 职场文书
初级职称评定工作总结
2015/08/13 职场文书