CODEWITHSUNDEEP
jquery
peace_love
peace_love

Reputation: 6471

How can I fire an event when I select the same option again?

I am trying to get an event when I hit an option of my select box, even if the option is already selected. The cause is, that I want to add the values to my list, with the possibility to add them multiple times.

Right now I can add dogand then cat and then dog. So in my list I have

  • dog
  • cat
  • dog

    • But it is not possible to add cat immediately after cat, so my list would look like this:

  • cat
  • cat
  • cat

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

$(document).ready(function () {
  $(".select2").on("change", function () {
    var classname = $(".select2 option:selected").val();
  $(".result").append("<li>" + classname + "</li>");
  });
});
    <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" style="width: 100%;">
    <option>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
  </select>
</div>



<div class="result"></div>

    EDIT: I found a solution that worked for me:

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

$(document).ready(function () {
  $(".select2").on("change", function () {
    var classname = $(".select2 option:selected").val();
  $(".result").append("<li>" + classname + "</li>");
  var should_be_selected = 'empty';
     $(".select2 option:selected").removeAttr("selected");
    $('.select2').find('.' + should_be_selected).attr('selected', 'selected');
   
  });
});
    <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" style="width: 100%;">
    <option class="empty"></option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
  </select>
</div>




<div class="result"></div>

    Upvotes: 0

    Views: 753

    Answers (2)

    WPSOLR
    WPSOLR

    Reputation: 50

    Adding the select2:close event worked for me:

    $('.select2').on('select2:select select2:close', function (e) {
// Do what you need here
});

    Upvotes: 0

    Rory McCrossan
    Rory McCrossan

    Reputation: 337646

    The change event only fires when the selected option changes - as its name implies. There's no reliable workaround for this behaviour if you want it to fire when the same option is chosen.

    An alternative is to place a <button> in the DOM and then only insert the new li when the button is clicked, like this:

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

  $(".add").on("click", function() {
    var classname = $(".select2").val();
    $(".result").append("<li>" + classname + "</li>");
  });
});
    .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" style="width: 100%;">
    <option>Cat</option>
    <option>Dog</option>
    <option>Bird</option>
  </select>
  <button class="add">Add</button>
</div>
<div class="result"></div>

    Upvotes: 1

    Related Questions