下拉列表不显示所选值答案

【问题标题】：DropdDownlist doesnt show the selected value下拉列表不显示所选值
【发布时间】：2019-06-27 13:39:15
【问题描述】：

我在 html 页面中有一个下拉列表，我一直在使用 .match 函数从数组中提取数据来填充它。如果我手动单击它，我可以看到下拉列表中显示的正确值。但是，我希望能够将选定的值存储在下拉列表中，并在我在不同的 html 页面之间导航和返回时再次返回它时自动选择它。我正在使用本地存储来完成此操作。

奇怪的是，它在导航页面时确实选择了正确的值，但仅在我单击列表时才将其显示为被选中，而不是在下拉列表中自动显示该值。我显示了“选择位置”的默认值。

请参阅下图以了解问题的说明。在这种情况下，下拉列表未选择文本，应显示的实际值以蓝色突出显示。

我正在使用 selectedIndex 属性在下拉列表中设置所需的值，但我无法弄清楚发生了什么。

这是我的 HTML 标记，onchange 函数只是为页面导航设置下拉列表的当前选定值。

   <center>  Select a Plant Room</center>       
              <select name="sites" onchange="getPlantRoom()" id="projectLocations">
              <center> <option value="default" >Select a location</option></center>
             </select>
           <center> 
           <div>

我有一个运行 onload 的函数，它运行但没有达到预期的结果。

var items= (JSON.parse(localStorage.getItem("sites")));  
var select = document.getElementById("projectLocations");

for(index in items) {
    select.options[select.options.length] = new Option(items[index].match("site:(.*),siteAddr:")[1], index);
}
var selectedPlant = document.getElementById("projectLocations");
var indexProject= localStorage.getItem("projLocation");
selectedPlant.selectedIndex=indexProject;

我自己已经研究这个问题一段时间了，但我看不到任何明显的东西。任何帮助都会很棒。谢谢

【问题讨论】：

您是否尝试过 console.logging 您从 localStorage 中提取的 indexProject 变量？
嗨，马克，我试过了，它似乎工作正常。它为默认选项保存 0，为第一条记录保存 1，为第二条保存 2。即使浏览页面也可以，当我返回带有下拉菜单的页面时，会返回正确的 indexProject var。它真的让我很头疼。感谢您的回复

标签： javascript drop-down-menu

【解决方案1】：

据我所知，负责更改 html 以显示所选值的事件尚未触发。这就是显示“选择位置”而不是您想要的值的可能原因。在 jQuery 中，我会使用以下代码：

$("#projectLocations").trigger("click");

您可以在加载函数的最后一行添加以下代码。

selectedPlant.dispatchEvent(new Event("click"));

【讨论】：

您好，Arpit，感谢您的回复。如果我手动选择一个选项并导航到页面然后返回，有时下拉测试是空白的。 “选择位置”文本被空白文本替换。单击下拉菜单显示选择了正确的选项，但未显示。我试过你建议的代码，但它不起作用。感谢您的帮助
你可以为它创建一个 jsfiddle 吗？
您能否在创建选项时尝试识别它。即尝试这种var isPreSelected =false; if (index == localStorage.getItem("projLocation")) isPreSelected = true; 然后使用这个值如下：select.options[select.options.length] = new Option(items[index].match("site:(.*),siteAddr:")[1], index,false,isPreSelected);

【解决方案2】：

好的，据我了解。您希望将所选项目存储在 state 中，然后在您再次访问该页面时将其用作默认 select。

如果是这种情况，那么我建议将选定的索引存储在本地存储中，然后检查该键。如果存在，它应该是select 的默认值。

【讨论】：