How can I use multiple modified select2 selectboxes?

I have a jquery code, that is resorting my select2 tags. It is working well:

$('select').select2({
  placeholder: 'Select a month'
});

$("select").on("select2:select", function(evt) {
  var element = evt.params.data.element;
  var $element = $(element);

  window.setTimeout(function() {
    if ($("select").find(":selected").length > 1) {
      var $second = $("select").find(":selected").eq(-2);

      $element.detach();
      $second.after($element);
    } else {
      $element.detach();
      $("select").prepend($element);
    }

    $("select").trigger("change");
  }, 1);
});

$("select").on("select2:unselect", function(evt) {
  if ($("select").find(":selected").length) {
    var element = evt.params.data.element;
    var $element = $(element);
    $
      ("select").find(":selected").after($element);
  }
});

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

<select multiple="multiple" style="width: 300px">
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

But I have problems, when I use more then one selectbox, my code is not working properly anymore:

$('select').select2({
  placeholder: 'Select a month'
});

$("select").on("select2:select", function(evt) {
  var element = evt.params.data.element;
  var $element = $(element);

  window.setTimeout(function() {
    if ($("select").find(":selected").length > 1) {
      var $second = $("select").find(":selected").eq(-2);

      $element.detach();
      $second.after($element);
    } else {
      $element.detach();
      $("select").prepend($element);
    }

    $("select").trigger("change");
  }, 1);
});

$("select").on("select2:unselect", function(evt) {
  if ($("select").find(":selected").length) {
    var element = evt.params.data.element;
    var $element = $(element);
    $
      ("select").find(":selected").after($element);
  }
});

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

<select multiple="multiple" style="width: 300px">
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>


<select multiple="multiple" style="width: 300px">
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>


<select multiple="multiple" style="width: 300px">
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

This means it only works for the last select box.

Mosh Feu

The problem is that you are using $("select") which returns all of the select tags and is not what you want. You want that on each select handler, the handler will run only for the select which trigger this event.

See how I fixed it..

$('select').select2({
  placeholder: 'Select a month'
});

$("select").on("select2:select", function(evt) {
  var $select = $(this);
  var element = evt.params.data.element;
  var $element = $(element);

  window.setTimeout(function() {
    if ($select.find(":selected").length > 1) {
      var $second = $select.find(":selected").eq(-2);

      $select.detach();
      $second.after($element);
    } else {
      $select.detach();
      $element.prepend($element);
    }

    $select.trigger("change");
  }, 1);
});

$("select").on("select2:unselect", function(evt) {
  if ($("select").find(":selected").length) {
   var $select = $(this);
    var element = evt.params.data.element;
    var $element = $(element);
    $select.find(":selected").after($element);
  }
});

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


<select multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>


<select multiple="multiple" style="width: 300px">
    <option value="JAN" selected>January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>


<select multiple="multiple" style="width: 300px">
    <option value="JAN" selected>January</option>
    <option value="FEB" selected>February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

You simply need to ID your selects and initialize them using the select2 plugin. Also, I've simplified your code using default functionality.

$("select#sel1").select2({
  multiple : true,
  placeholder : 'Select a month',
});

$("select#sel2").select2({
  multiple : true,
  placeholder : 'Select a month',
});

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


<select id="sel1" multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>


<select id="sel2" multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

来源：https://stackoverflow.com/questions/48689242/how-can-i-use-multiple-modified-select2-selectboxes

标签

jquery

select

jquery-select2