DropdDownlist不显示所选值

Question

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

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

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

我正在使用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;

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

Answer 1

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

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

您可以将以下代码添加为加载功能的最后一行。

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

Answer 2

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

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