可排序的 select2 交换值

Question

我正在尝试使用 sortable 更改我的 select2 中的值，但没有白费..我尝试在停止函数中循环交换值，但我似乎无法得到它正确的。

这是我的简化代码：

$(".select2").select2();

$("ul.select2-selection__rendered").sortable({
  containment: 'parent',
  stop: function(event, ui) {
  console.log($("#form").serializeArray())
  }
});

console.log($("#form").serializeArray())

.select2 {
  width: 100%;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form id="form" onsubmit="return false;">
        <select class="select2" name="test1" multiple>
          <option value="1" selected>test1</option>
          <option value="2" selected>test2</option>
          <option value="3" selected>test3</option>
        </select>
      </form>
    </div>
  </div>
</div>

拖放有效，但我希望能够用它们更改值，以便 console.log 打印出重新排序的值。

关于如何使用带有 select2 的 sortable 来交换 select 中的选项的任何提示将不胜感激。

Fiddle : https://jsfiddle.net/763opz0c/4/

Answer 1

您好，您可以像这样更新您的排序功能。

$(".select2").select2();
var formData=[];
$("ul.select2-selection__rendered").sortable({
  containment: 'parent',
  stop: function(event, ui) {
      formData=[];
      var _li= $('li.select2-selection__choice');
        _li.each(function(idx) {
          var currentObj=$(this);
          var data=currentObj.text();
          data=data.substr(1,data.length);
          formData.push({name:data,value:currentObj.val()})
     })
        console.log(formData)
  },
   update: function() {
        var _li= $('li');
       // _li.removeAttr("value");
        _li.each(function(idx) {
          var currentObj=$(this);
          console.log(currentObj.text());
          $(this).attr("value", idx + 1);
        })
   }
});

请看一下here

Answer 2

这是一种方法：

select2 将数据存储在我们可以 use/map 根据要求的列表项中。这是 select2

如何存储数据的控制台日志

$(".select2").select2({width: '300px'});

console.log($("ul.select2-selection__rendered").find('li.select2-selection__choice').data());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0" multiple>
          <option value="1" selected>test1</option>
          <option value="2" selected>test2</option>
          <option value="3" selected>test3</option>
        </select>
      </form>
    </div>
  </div>
</div>

使用上述数据，我们可以在 stop 回调中映射列表项的数据：

$(".select2").select2({width: '400px'});

$("ul.select2-selection__rendered").sortable({
  containment: 'parent',
  stop: function(event, ui) {
  // event target would be the <ul> which also contains a list item for searching (which has to be excluded)
    var arr = Array.from($(event.target).find('li:not(.select2-search)').map(function () { 
       return {name: $(this).data('data').text, value: $(this).data('data').id }; 
      }))
    console.log(arr);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0" multiple>
          <option value="1" selected>test1</option>
          <option value="2" selected>test2</option>
          <option value="3" selected>test3</option>
        </select>
      </form>
    </div>
  </div>
</div>

编辑：使表单的序列化数组按上述方式工作

使用上面的arr，我们可以根据arr中的值对选项进行排序，而#form.serializearray()则完全没有问题。方法如下：

$(".select2").select2({width: '400px'});

$("ul.select2-selection__rendered").sortable({
  containment: 'parent',
  stop: function(event, ui) {
  // event target would be the <ul> which also contains a list item for searching (which has to be excluded)
    var arr = Array.from($(event.target).find('li:not(.select2-search)').map(function () { 
       return {name: $(this).data('data').text, value: $(this).data('data').id }; 
      }))
    //console.log(arr);
  
    var select = $(event.target).parents('span.select2-container').prev('select');
  // sort the options based on arr
    select.find('option').each(function (i, option) {
     option.value = arr[i].value;
      $(option).text(arr[i].name);
    });
    
    console.log($("#form").serializeArray());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" />
<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0" multiple>
          <option value="1" selected>test1</option>
          <option value="2" selected>test2</option>
          <option value="3" selected>test3</option>
        </select>
      </form>
    </div>
  </div>
</div>

希望这对您有所帮助。

可排序的 select2 交换值

Sortable select2 swap value

javascript

jquery

jquery-ui

jquery-select2

jquery-ui-sortable