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实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
vue开发简单上传图片功能
Jun 30 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循环获取GET和POST值的代码
2008/04/09 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
PHP查询快递信息的方法
2015/03/07 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python笔记之代理模式
2019/11/20 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
负责人任命书范本
2014/06/04 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis