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>

У меня есть функция, которая работает под нагрузкой, которая работает, но не достигает желаемых результатов.

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.