Question

我完全陷入尝试进行ul排序并且在更新函数中使用ul中项目的新顺序对（隐藏）选择进行排序

这是我的功能

jQuery(document).ready(function ($) {
function sort() {
    $('.element').sortable({
        update: function (event, ui) {
            var draggingElement = $('.item');
            draggingElement.each(function () {
                var ordering = $(this).index();
                var option = 'opt' + ordering + '';
                $("#list").find('#' + option + '').index(ordering);
            });
        }
    });
};
sort();
});

这是我的HTML

<ul class="element">
  <li class="item">0</li>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>
<select name="list1" multiple="true" class="list_hidden" id="list">
  <option id="opt0" selected="selected" value="0">0</option>
  <option id="opt1" selected="selected" value="1">1</option>
  <option id="opt2" selected="selected" value="2">2</option>
  <option id="opt3" selected="selected" value="3">3</option>
</select>

我真的不知道该怎么做，我也尝试制作一个选项数组，排序并将它们附加到选择但我想我总是错了

也许有人已经解决了这个问题？

select必须是multiple = true

这是一个可视化我的问题的小提琴

http://jsfiddle.net/JKjD5/4/

提前感谢任何提示

Answer 1

您可以这样做:(工作但未优化）

jQuery(document).ready(function ($) {
  function sort() {
    $('.element').sortable({
    update: function (event, ui) {
      var draggingElement = $('.item');
      $("#list").empty();
      draggingElement.each(function () {
        $("#list").append($('<option />').attr('id','opt'+$(this).text()).attr('value',$(this).text()).attr('selected', 'selected').text($(this).text()));
     });
  }
});
};
sort();
});

现在它有效Fiddle

如果您愿意，可以将一些data存储到li列表中，以便在排序功能中使用它们，例如：

<li class='item' data-rel='opt45' data-value='123' >text</li>

并像这样检索它们:(在sort函数的.each中）

$(this).attr('data-value');

Jquery UI .sortable（）触发器选择排序

1 个答案: