Сортируемое значение свопа select2

Question

Я пытаюсь изменить значение внутри моего 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 печатал переупорядоченные значения,

Любые подсказки были бы весьма полезны в отношении того, как можно использовать сортировку с помощью select2 для изменения опций в select.

Fiddle: 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>

РЕДАКТИРОВАТЬ: заставить сериализованный массив формы работать так, как указано

Используя 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);
        })
   }
});

Пожалуйста, посмотрите здесь