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 Selector选择器小结
May 06 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
js显示文本框提示文字的方法
May 07 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 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开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
python中__call__方法示例分析
2014/10/11 Python
利用python如何处理nc数据详解
2018/05/23 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
企业统计员岗位职责
2013/12/13 职场文书
行政专员求职信范文
2014/05/03 职场文书
社区春季防火方案
2014/06/02 职场文书
滞留工资返还协议书
2014/10/19 职场文书
合作合同协议书范本
2015/01/27 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP