如何從多個下拉列表中顯示已選擇的數據庫值的值

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()以與用戶自然觸發事件相同的順序執行處理程序

您可以先設置值然后觸發更改事件：

$('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()使用最新的選定值觸發事件。

在 change 事件處理函數中使用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');