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

Question

我有一个 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>

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

Answer 1

问题是您使用的 $("select") 会返回 all 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>