可排序的 select2 交换值

Question

我正在尝试使用 sortable 更改我的 select2 中的值，但没有白费。我尝试通过 stop 函数中的值交换循环，但似乎无法正确处理。

这是我的简化代码：

$(".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 打印出重新排序的值。

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

小提琴：https://jsfiddle.net/763opz0c/4/

Answer 1

这是一种方法：

select2 将数据存储在我们可以根据要求使用/映射的列表项中。这是 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>

编辑：使表单的 serializearray 像提到的那样工作

使用上面的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>

希望这会有所帮助。

Answer 2

您好，您可以像这样更新您的可排序函数。

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