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

时间：2018-02-08 15:37:11

标签： jquery select jquery-select2

我有一个jquery代码，即使用我的select2标签。它运作良好：

＆＃13;
＆＃13; 
$('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);
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

但我有问题，当我使用多个选择框时，我的代码不再正常工作：

＆＃13;
＆＃13; 
$('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);
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案:

答案 0 :(得分：2)

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

看看我是如何解决它的。

＆＃13;
＆＃13; 
$('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);
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您只需要识别您的选择并使用select2插件对其进行初始化。另外，我使用默认功能简化了代码。

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

相关问题
最新问题