Jarla Jarla - 19 days ago 4
jQuery Question

How can I control the select2 select box from an external list box?

I am working with the

select2
multiple select box. I want to display the result of my selection in an external list. From this list I also want to be able to remove the items again. It is working more or less but is getting kind of buggy after removing some items from the external list and insert it again via the select box. I visualized everything here to illustrate my problem :



$(function () {
//Initialize Select2 Elements
$(".select2").select2();
});

$(document).ready(function () {

$(".select2").on("change", function () {
$(".select2-selection__rendered li").each(function () {
var title = $(this).attr('title');
if (typeof title !== typeof undefined && title !== false) {
var animal = title.replace(/ /g, "");
$('#' + animal).show();
}
});
});


$(".remove").click(function () {
$(this).closest(".animals").hide();
var className = $($(this).closest("li")).attr('id');
$(".select2-selection__rendered li[title='" + className + "']").remove();
});

});

.remove{cursor:pointer}

<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
<select class=" form-control select2" multiple="multiple" data-placeholder="+ select" style="width: 100%;">
<option>Cat</option>
<option>Dog</option>
<option>Bird</option>
</select>
</div>

<ul>
<li class="animals" id="Cat" style="display:none">Cat <a class="remove">x</a></li>
<li class="animals" id="Dog" style="display:none">Dog <a class="remove">x</a></li>
<li class="animals" id="Bird" style="display:none">Bird <a class="remove">x</a></li>
</ul>




Answer

The problem is in the way you remove the items from your select2, I suggest to give your option's a value then when you click on the li get the title and remove the matched option that have value=title from the list of selected values and reassign the new array to your select : :

var new_values = $(".select2").val().filter(item => item !== className);
$(".select2").val(new_values).change();

NOTE : you don't need two ready functions just one enough.

Hope this helps.

$(function () {
  $(".select2").select2();

  $(".select2").on("change", function () {
    $(".select2-selection__rendered li").each(function () {
      var title = $(this).attr('title');
      
      if (typeof title !== typeof undefined && title !== false) {
        var animal = title.replace(/ /g, "");
        $('#' + animal).show();
      }
    });
  });


  $(".remove").click(function () {
    $(this).closest(".animals").hide();
    
    var className = $($(this).closest("li")).attr('id');
    var new_values = $(".select2").val().filter(item => item !== className);
    
    $(".select2").val(new_values).change();
  });

});
.remove{cursor:pointer}
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://select2.github.io/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://select2.github.io/vendor/js/bootstrap.min.js"></script>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>

<div class="form-group">
  <select class=" form-control select2" multiple="multiple" data-placeholder="+ select" style="width: 100%;">
    <option value='Cat'>Cat</option>
    <option value='Dog'>Dog</option>
    <option value='Bird'>Bird</option>
  </select>
</div>

<ul>
  <li class="animals" id="Cat" style="display:none">Cat <a class="remove">x</a></li>
  <li class="animals" id="Dog" style="display:none">Dog <a class="remove">x</a></li>
  <li class="animals" id="Bird" style="display:none">Bird <a class="remove">x</a></li>
</ul>

Comments