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 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
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常量define和const的区别详解
2019/05/18 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
用python实现百度翻译的示例代码
2018/03/09 Python
django 外键model的互相读取方法
2018/12/15 Python
Python匿名函数及应用示例
2019/04/09 Python
基于python实现高速视频传输程序
2019/05/05 Python
Django密码系统实现过程详解
2019/07/19 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
公司委托书怎么写
2014/08/02 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python