带有一个条件选项的两个 Select 元素（下拉菜单）答案

【问题标题】：Two Select elements(drop downs) with one conditional options带有一个条件选项的两个 Select 元素（下拉菜单）
【发布时间】：2020-08-10 23:20:36
【问题描述】：

我使用了两个选择元素（下拉）。第一个用于item，第二个用于color。 color 取决于 item 的值。

如果 item 的值为 ITEM1 那么 color 可以有 color1, color2, color3 并且如果item 的值为 ITEM2 则 color 可以有 color4,color5,color6。代码如下

 <select name="item" onChange={changeItem}>
    <option value="ITEM1"> Item1 </option>
    <option value="ITEM2"> Item2 </option>
  </select>
  <select name="color" onChange={changeInputs}>
    {inputs.item === "ITEM1" ? (
      <Fragment>
        <option selected value="color1">Color 1</option>
        <option value="Color2"> Color 2 </option>
        <option value="Color3"> Color 3 </option>
      </Fragment>
    ) : (
      <Fragment>
        <option selected value="color4">Color 4 </option>
        <option value="Color5"> Color 5 </option>
        <option value="Color6"> Color 6 </option>
      </Fragment>
    )}
  </select>

当我更改item 的值时，我手动将color 的值更新为它们各自color 的第一个选项。

但是问题来了。当我将 color 选项更改为 color 2（不更改 item 即，item 仍然是 ITEM1 ) 然后将 item 的值更改为 ITEM2，在 color 选项中显示的初始值为 color 5 （不是 color4 因为我期望该选项的默认值应该存在）这在我的网络应用程序中创建了一个错误。如何解决？或者还有另一种方法可以做到这一点。提前谢谢你。

可以模拟上面的here

【问题讨论】：

标签： html reactjs drop-down-menu react-hooks html-select

【解决方案1】：

哦，我认为这是因为您没有在选项中使用keys。所以你可以这样写

          <Fragment>
            <option selected key="color1" value="color1">
              Color 1
            </option>
            <option key="Color2" value="Color2">
              Color 2
            </option>
            <option key="Color3" value="Color3">
            </option>
          </Fragment>
        ) : (
          <Fragment>
            <option selected key="color4" value="color4">
              Color 4
            </option>
            <option key="Color5" value="Color5">
              Color 5
            </option>
            <option key="Color6" value="Color6">
              Color 6
            </option>
          </Fragment>

【讨论】：