代码之家 › 专栏 › 技术社区 › arcade16

是否映射要选择的字典数组下拉列表?

reactjs javascript

arcade16 · 技术社区 · 5 年前

我试图将一系列字典映射到一个select下拉列表,但是我当前的方法只是生成正确数量的select选项,没有任何值。

This is what my array looks like:
dateArray = [
      {year:'2016', month: "01"},
      {year:'2017', month: "01"},
      {year:'2018', month: "02"},
      {year:'2018', month: "02"}
    ];

这是我尝试将数组映射到Select下拉列表的方式:

            <select className='form-control'>
              {this.state.dateArray.map((year) => <option key={year.value} value={year.value}>{year.display}</option>)}
            </select>
            <select className='form-control'>
              {this.state.dateArray.map((month) => <option key={month.value} value={month.value}>{month.display}</option>)}
            </select>

如何映射字典数组以选择下拉列表?

2 回复 | 直到 5 年前

Wiktor Maciej 5 年前

也许这样的方法会奏效:

<select className='form-control'>
  {this.state.dateArray.map((item, i) => {return <option key={i} value={item.year}>{item.year}</option>})}
</select>
<select className='form-control'>
  {this.state.dateArray.map((item, i) => {return <option key={i} value={item.month}>{item.month}</option>})}
</select>

Aniket G 5 年前

此代码使用 .foreach() 循环以循环遍历数组,以及 .querySelectorAll() 选择元素。然后使用 .innerHTML 将选项附加到选择。

let dateArray = [{
    year: '2016',
    month: "01"
  },
  {
    year: '2017',
    month: "01"
  },
  {
    year: '2018',
    month: "02"
  },
  {
    year: '2018',
    month: "02"
  }
];
let select = document.querySelectorAll(".form-control")[0];

dateArray.forEach(e => {
  select.innerHTML += `<option key="${e.year}" value="${e.year}">${e.year}</option>`;
});

<select class='form-control'>

</select>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前