每当弹出窗口关闭时，都会重置多选

Question

我在弹出框内有一些多选，但是每当弹出框关闭时，多选就会被删除，有没有办法将多选放在弹出框内而不会丢失所选数据？

在我单击按钮时创建多选的代码中，我相信这可能是问题的原因，但我找不到另一种将多选添加到弹出窗口的方法。我遵循了这个问题的答案之一：

https//stackoverflow.com/questions/ 22409391/how-to-put-a-multiselect-in-a-popover

这是我的代码：

 let popover_filters = '<div id="popover_filters" class="text-center">'+
                          '<select id="activity_filter_sector" class="form-control" name="multiselect[]" multiple="multiple" alt="setor" required>'+
                            '<option value="0">Contábil e Financeiro</option>'+
                            '<option value="1">Fiscal e Tributário</option>'+
                            '<option value="2">Pessoal e Trabalhista</option>'+
                            '<option value="3">Gestão e controladoria</option>'+
                          '</select>'+
                          '<select id="activity_filter_company" class="form-control" name="multiselect[]" multiple="multiple" alt="empresa" required>'+
                            '<option value="0">Contábil e Financeiro</option>'+
                            '<option value="1">Fiscal e Tributário</option>'+
                            '<option value="2">Pessoal e Trabalhista </option>'+
                            '<option value="3">Gestão e controladoria Gestão e controladoria Gestão e controladoria</option>'+
                          '</select>'+
                          '<select id="activity_filter_status" class="form-control" name="multiselect[]" multiple="multiple" alt="status" required>'+
                            '<option value="0">agendado</option>'+
                            '<option value="1">concluído</option>'+
                            '<option value="2">pendente</option>'+
                            '<option value="3">em atraso</option>'+
                          '</select>'+
                          '<select id="activity_filter_users" class="form-control" name="multiselect[]" multiple="multiple" alt="usuários" required>'+
                            '<option value="0">Contábil e Financeiro</option>'+
                            '<option value="1">Fiscal e Tributário</option>'+
                            '<option value="2">Pessoal e Trabalhista</option>'+
                            '<option value="3">Gestão e controladoria</option>'+
                          '</select>'+
                        '</div>'

                        
  $('#activity_filter_btn').popover({
     html:true,  placement : 'bottom', content: popover_filters, trigger:'click', 
    }).on('click',function () {
      $('#activity_filter_sector').multiselect()
      $('#activity_filter_company').multiselect()
      $('#activity_filter_status').multiselect()
      $('#activity_filter_users').multiselect()
    }).on("hide.bs.popover", function(){
      let total = 0
      total += $('#activity_filter_sector').val().length
      total += $('#activity_filter_company').val().length
      total += $('#activity_filter_status').val().length
      total += $('#activity_filter_users').val().length
      if (total >0){
        $(this).addClass('btn-primary')
        $(this).removeClass('btn-default')
      }else{
        $(this).addClass('btn-default')
        $(this).removeClass('btn-primary')
      }
    });

<!-- jQuery -->
      <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
      <!-- Bootstrap -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <!-- multiselect -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" integrity="sha512-EvvoSMXERW4Pe9LjDN9XDzHd66p8Z49gcrB7LCUplh0GcEHiV816gXGwIhir6PJiwl0ew8GFM2QaIg2TW02B9A==" crossorigin="anonymous" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" integrity="sha512-aFvi2oPv3NjnjQv1Y/hmKD7RNMendo4CZ2DwQqMWzoURKxcqAoktj0nNG4LU8m23+Ws9X5uVDD4OXLqpUVXD5Q==" crossorigin="anonymous"></script>
      
<button id="activity_filter_btn"class="mt-3 btn btn btn-default"><i class="fas fa-filter mr-2"></i>Filtrar</button>

Answer 1

解决此问题的一种方法是将您选择的值存储在弹出窗口打开/关闭之间持续存在的某个位置。

打开时，使用.multiselect('select', [value_arr]) 设置选择值。

关闭时，存储这些值，以便下次打开弹出框时可以访问它们。

我在这里只使用了 4 个变量，但您可以想象任何对您的项目方便的存储机制。

let popover_filters = '<div id="popover_filters" class="text-center">' +
  '<select id="activity_filter_sector" class="form-control" name="multiselect[]" multiple="multiple" alt="setor" required>' +
  '<option value="0">Contábil e Financeiro</option>' +
  '<option value="1">Fiscal e Tributário</option>' +
  '<option value="2">Pessoal e Trabalhista</option>' +
  '<option value="3">Gestão e controladoria</option>' +
  '</select>' +
  '<select id="activity_filter_company" class="form-control" name="multiselect[]" multiple="multiple" alt="empresa" required>' +
  '<option value="0">Contábil e Financeiro</option>' +
  '<option value="1">Fiscal e Tributário</option>' +
  '<option value="2">Pessoal e Trabalhista </option>' +
  '<option value="3">Gestão e controladoria Gestão e controladoria Gestão e controladoria</option>' +
  '</select>' +
  '<select id="activity_filter_status" class="form-control" name="multiselect[]" multiple="multiple" alt="status" required>' +
  '<option value="0">agendado</option>' +
  '<option value="1">concluído</option>' +
  '<option value="2">pendente</option>' +
  '<option value="3">em atraso</option>' +
  '</select>' +
  '<select id="activity_filter_users" class="form-control" name="multiselect[]" multiple="multiple" alt="usuários" required>' +
  '<option value="0">Contábil e Financeiro</option>' +
  '<option value="1">Fiscal e Tributário</option>' +
  '<option value="2">Pessoal e Trabalhista</option>' +
  '<option value="3">Gestão e controladoria</option>' +
  '</select>' +
  '</div>';

//Initialize storage vars:
let sector = [];
let company = [];
let status = [];
let users = [];


$('#activity_filter_btn').popover({
  html: true,
  placement: 'bottom',
  content: popover_filters,
  trigger: 'click',
}).on('click', function() {
//On open, set selects to the stored values
  $('#activity_filter_sector').multiselect('select', sector)
  $('#activity_filter_company').multiselect('select', company)
  $('#activity_filter_status').multiselect('select', status)
  $('#activity_filter_users').multiselect('select', users)
}).on("hide.bs.popover", function() {
//On close, store the values
  sector = $('#activity_filter_sector').val()
  company = $('#activity_filter_company').val()
  status = $('#activity_filter_status').val()
  users = $('#activity_filter_users').val()

  let total = 0
  total += sector.length
  total += company.length
  total += status.length
  total += users.length
  if (total > 0) {
    $(this).addClass('btn-primary')
    $(this).removeClass('btn-default')
  } else {
    $(this).addClass('btn-default')
    $(this).removeClass('btn-primary')
  }
});

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- multiselect -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" integrity="sha512-EvvoSMXERW4Pe9LjDN9XDzHd66p8Z49gcrB7LCUplh0GcEHiV816gXGwIhir6PJiwl0ew8GFM2QaIg2TW02B9A==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js" integrity="sha512-aFvi2oPv3NjnjQv1Y/hmKD7RNMendo4CZ2DwQqMWzoURKxcqAoktj0nNG4LU8m23+Ws9X5uVDD4OXLqpUVXD5Q==" crossorigin="anonymous"></script>

<button id="activity_filter_btn" class="mt-3 btn btn btn-default"><i class="fas fa-filter mr-2"></i>Filtrar</button>