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弹窗代码 可以指定弹出间隔
Jul 03 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
node跨域请求方法小结
Aug 25 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 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
YB217、YB235、YB400浅听
2021/03/02 无线电
一些PHP写的小东西
2006/12/06 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
FireFox浏览器使用Javascript上传大文件
2013/10/30 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
python定义类的简单用法
2020/07/24 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
应届生体育教师自荐信
2013/10/03 职场文书
自我鉴定思想方面
2013/10/07 职场文书
医德医风自我评价
2014/09/19 职场文书
初中教师个人工作总结
2015/02/10 职场文书
会计求职信怎么写
2015/03/20 职场文书
小马王观后感
2015/06/11 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python