Running a function after selecting an item in the duallistbox double check box

Question

I’m using a double check box, bootstrap4-duallistbox where the user will move to the right which fruits he wishes.

My intention is to perform a function after the user selects a fruit, to display the block with the class. card that is hidden with display None, in case the user demarque all the options, the code block will be hidden again.

$('.duallistbox').bootstrapDualListbox({
  nonSelectedListLabel: 'Selecione as as frutas',
  selectedListLabel: 'Frutas selecionadas',
  filterTextClear: 'Mostrar todas',
  filterPlaceHolder: 'Buscar',
  moveSelectedLabel: 'Mover fruta selecionada',
  moveAllLabel: 'Selecionar todas as frutas',
  removeSelectedLabel: 'Remover fruta selecionada',
  removeAllLabel: 'Remover todas as frutas',
  infoText: 'Frutas {0}',
  infoTextEmpty: 'Nenhuma fruta selecionada',
  infoTextFiltered: '<span class="label label-warning">Encontrado</span> {0} de {1}',
  preserveSelectionOnMove: 'moved',
  moveOnSelect: false
});

$('select.dual').on('change', function() {
  //console.log($(this).length);
})

.card {
  margin-top: 30px;
  display: none;
}

.card p {
  text-align: center;
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.1/jquery.bootstrap-duallistbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.1/bootstrap-duallistbox.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />




<div class="duallistbox">
  <select multiple="multiple" size="10" id="duallistbox" class="dual" name="frutas">
    <option value="abacaxi">Abacaxi</option>
    <option value="acerola">Acerola</option>
    <option value="amora">Amora</option>
    <option value="cupuacu">Cupuaçu</option>
    <option value="framboesa">Framboesa</option>
    <option value="laranja">Laranja</option>
    <option value="morango">Morango</option>
  </select>
</div>

<div class="card">
  <p>Card que será exibido quando houver pelo menos uma fruta selecionada</p>
</div>

Answer 1

The event is applied to the same class used to create duallistbox. then change the code

$('select.dual').on('change', function() {
    //console.log($(this).length);
});

for

$('.duallistbox').on('change', function() {
    //console.log($(this).length);
})

$('.duallistbox').bootstrapDualListbox({
  nonSelectedListLabel: 'Selecione as as frutas',
  selectedListLabel: 'Frutas selecionadas',
  filterTextClear: 'Mostrar todas',
  filterPlaceHolder: 'Buscar',
  moveSelectedLabel: 'Mover fruta selecionada',
  moveAllLabel: 'Selecionar todas as frutas',
  removeSelectedLabel: 'Remover fruta selecionada',
  removeAllLabel: 'Remover todas as frutas',
  infoText: 'Frutas {0}',
  infoTextEmpty: 'Nenhuma fruta selecionada',
  infoTextFiltered: '<span class="label label-warning">Encontrado</span> {0} de {1}',
  preserveSelectionOnMove: 'moved',
  moveOnSelect: false
});

$('.duallistbox').on('change', function() {
    console.log("duallistbox");
  //console.log($(this).length);
})

.card {
  margin-top: 30px;
  display: none;
}

.card p {
  text-align: center;
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.1/jquery.bootstrap-duallistbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap4-duallistbox/4.0.1/bootstrap-duallistbox.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />




<div class="duallistbox">
  <select multiple="multiple" size="10" id="duallistbox" class="dual" name="frutas">
    <option value="abacaxi">Abacaxi</option>
    <option value="acerola">Acerola</option>
    <option value="amora">Amora</option>
    <option value="cupuacu">Cupuaçu</option>
    <option value="framboesa">Framboesa</option>
    <option value="laranja">Laranja</option>
    <option value="morango">Morango</option>
  </select>
</div>

<div class="card">
  <p>Card que será exibido quando houver pelo menos uma fruta selecionada</p>
</div>