如何从多个下拉列表中显示已选择的数据库值的值

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');