Блог

У меня возникли проблемы с тем, как я могу отобразить список в моем выпадающем списке, используя localStorage.Проблема в том, что после сохранения localstorage, когда я снова возвращаюсь к своему модальному, как показано на рисунке ниже в выпадающем списке, список не отображался, я просто хочу отобразить список в выпадающем списке, сохраненный в localstorage. , Знает ли об этом какой-нибудь эксперт? заранее спасибо.

Это то, что я пробовал

 <button type="submit" class="btn btn-outline-primary" onclick="storagelocal()">Search</button>
 

выберите опцию

  <select class="select2 form-control" multiple="multiple" name="batch[]" id="batch[]">
    <optgroup label="Mountain Time Zone">
    <option value="1">1</option>
    <option value="2" >2</option>
    <option value="3" >3</option>
    <option value="4" >4</option>
    <option value="5" >5</option>
    <option value="6" >6</option>
</optgroup>
                                    
</select>
 

Javascript

 #setting the list
      function storagelocal(){
        var selected = document.getElementById('#batch[]').value; # dropdown Id for payroll batch
        localStorage.setItem("selected", JSON.stringify(selected));

       }

    #getting the list
    function load_address(){
      var batches = JSON.parse(localStorage.getItem('selected'));
      $('#batch[]').val(batches);
      $('#batch[]').change();
    }
 

Чтобы получить значение из множественного выбора, вы должны принимать его один за другим.

 function storagelocal(){
  const options = document.getElementById('batch[]').options;
  var selected = [];
  Array.from(options).map((option) => {
    if (option.selected) {
      selected.push(option.value);
    }
  });
  localStorage.setItem("selected", JSON.stringify(selected));
}
 

чтобы задать множественное значение options для множественного выбора, вам необходимо вручную добавить выбранные атрибуты к <option> элементу.

 function load_address() {
    var selected = JSON.parse(localStorage.getItem("selected"));
    const options = document.getElementById('batch[]').options;
    Array.from(options).map((option) => {
        if(selected.indexOf(option.value) !== -1) {
            option.setAttribute("selected", "selected");
        }
    });
}