时间戳

首页 > 解决方案 > 反应：下拉显示重复选项比给定

javascript - 反应：下拉显示重复选项比给定

问题描述

对于本地化语言，我创建了一个下拉菜单，其中包含两个选项 Eng 和 Th（泰语）。但是在获取数据时，会显示四个选项。

例如，如果我选择了泰语，那么 3 个泰语选项，显示一个 Eng，反之亦然 Eng 也显示。如图

在此处输入图像描述

请帮忙弄清楚。

我的选择代码如下：

    <select
         name="EN"
         id="EN"
         onChange={(e) => {
                      localStorage.setItem("lang", e.target.value);
                      window.location.reload(false);
                    }}
      >
         {localStorage.getItem("lang") !== null ? (
          <option selected={localStorage.getItem("lang")}>
             {localStorage.getItem("lang").toUpperCase()}
          </option>
            ) : null}
          <option value="en">EN</option>
          <option value="th">TH</option>
 </select>

标签： javascripthtmlreactjsreduxlocalization

解决方案

第一个显示的是您在此处编写的选定选项：

<option selected={localStorage.getItem("lang")}>
             {localStorage.getItem("lang").toUpperCase()}
          </option>

当您显示下拉列表时，第二个是您选择的，我相信这是默认情况下选择元素的工作方式。我不知道如何改变这种行为。

现在，第三个和第四个选项就是您在此处编写的选项：

<option value="en">EN</option>
<option value="th">TH</option>

我会做类似的事情：

{(localStorage.getItem("lang")) === en ? 
<option value="th">TH</option> : 
<option value="en">EN</option>)}

这样，您将只有选定的一项，而未选定的一项作为选项。您编写代码的方式将始终显示 EN 和 TH 选项，无论选择的选项如何。

编辑：再次查看代码后，我不明白您为什么要获取选定的语言作为选项。这样做会更容易：

 <select
         name="EN"
         id="EN"
         onChange={(e) => {
                      localStorage.setItem("lang", e.target.value);
                      window.location.reload(false);
                    }}
      >
       
          <option selected value="en">EN</option>
          <option value="th">TH</option>
 </select>

此外，我会将选择的“名称”和“id”重命名为类似 langSelector 或类似的名称，而不是与特定选项相关，因为这可能会根据用户的决定而改变。

如果您真的只想有两个选项（实际上是一个），我会将此答案视为指导，并根据存储在本地存储中的“lang”使占位符成为条件，并且该选项也是有条件的，就像我已经给出的例子：

https://stackoverflow.com/a/30525521/14492009

推荐阅读