如何使用多个修改的select2选择框? [英] How can I use multiple modified select2 selectboxes?

查看：69
本文介绍了如何使用多个修改的select2选择框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个jquery代码，即使用我的select2标签.运行良好:

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.

推荐答案

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

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.

看看我如何解决它.

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

这篇关于如何使用多个修改的select2选择框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆