Как отобразить значение уже выбранной базы данных из раскрывающегося списка

Question

У меня есть несколько раскрывающихся меню, как показано ниже

<select class="select2_multiple form-control" multiple="multiple" id="users'.$id.'" name="users" style="width: 100%;left: 10px;">
    <option id="none" value="">Select Users</option>';
     ... further options generated as per database values (php) ......
</select>
<div id="wrapper" style="top: 105px;"></div>

Теперь у меня есть javascript для отображения выбранных пользователем значений. это обернется в другом div

<script type=text/javascript>
        $('select[name="users"]').change(function() {
            $('#wrapper').html('');
            $('option:selected', $(this)).each(function() {
                $('#wrapper').append(
                    $('<ul class="user-list"><li>').html($('<a href="profile.php" data-toggle="tooltip" title="'+$(this).data('usertitle')+'"/><div class="user-info"><span class="avatar"><img src="images/'+$(this).data('useravatar')+'" alt=""> </span><div class="user-info-body"><div class="user-name">'+$(this).data('usertitle')+'</div><span class="country">'+$(this).data('country')+'</span></div></div></a></li></ul>'))
                );
            });
        });
    </script>

Эта функция работает отлично.

Единственная проблема заключается в том, что она отображает выбранные значения только в случае изменения выпадающего списка или изменения пользователями выпадающего списка параметры.

Мне нужно отобразить существующие выбранные значения без внесения каких-либо изменений в раскрывающемся списке.

Answer 1

.trigger():

Вызов .trigger() выполняет обработчики в том же порядке, в каком они были бы, если событие было инициировано естественным образом пользователем

Вы можете сначала установить значение, а затем вызвать событие change :

$('select[name="users"]').val('').trigger('change');

Демонстрация:

$('select[name="users"]').change(function() {
  $('#wrapper').html('');
  $('option:selected', $(this)).each(function() {
    $('#wrapper').append(
      $('<ul class="user-list"><li>').html($('<a href="profile.php" data-toggle="tooltip" title="title"/><div class="user-info"><span class="avatar"><img src="images/avatar" alt=""> </span><div class="user-info-body"><div class="user-name">title</div><span class="country">country</span></div></div></a></li></ul>'))
    );
  });
});

$('select[name="users"]').val('').trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select2_multiple form-control" multiple="multiple" id="users'.$id.'" name="users" style="width: 100%;left: 10px;">
  <option id="none" value="">Select Users</option>
  <option id="none1" value="1">1111111</option>
  <option id="none2" value="2">2222222</option>
  <option id="none3" value="3">3333333</option>
</select>
<div id="wrapper" style="top: 105px;"></div>

Обновление: Вы можете использовать localStorage(), чтобы вызвать событие, используя последнее выбранное значение.

Внутри функции обработчика события изменения установите текущее выбранное значение с помощью localStorage.setItem()

$('select[name="users"]').change(function() {
  localStorage.setItem('latestValue', this.value);
  .....
  .....
});

Затем используйте это с помощью localStorage.getItem():

var last = localStorage.getItem('latestValue');
if(!last) last = ""; // set to empty if null
$('select[name="users"]').val(last).trigger('change');