jquery - 如何使用多个修改的select2选择框？

我有一个jquery代码，这就是我的select2标签。运行良好：

$('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').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>

这意味着它仅适用于最后一个选择框。

最佳答案

问题是您使用的是$("select")，它返回所有select标记，而不是您想要的。您希望在每个select处理程序上，该处理程序将仅针对触发此事件的select运行。

看看我是如何解决的。

$('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>

关于jquery - 如何使用多个修改的select2选择框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48689242/