0

我完全坚持尝试使 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>

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

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

选择必须是一个multiple=true

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

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

提前感谢，任何提示

4

1 回答 1

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();
});

现在它可以工作小提琴

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

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

并像这样检索它们：（在.each排序函数中）

$(this).attr('data-value');
于 2013-03-26T14:55:32.667 回答