jQuery UI .sortable()触发选择排序 [英] Jquery UI .sortable() trigger select sort

问题描述

我完全想尝试使ul可排序，并在update函数中对ul中的项目按新顺序对(隐藏的)select进行排序

I am completely stuck in trying to make an ul sortable and within the update function sort the (hidden) select with the new order of the items in the 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>

我真的不知道该怎么办，我还试图制作一系列选项，对它们进行排序并将其附加到选择项上，但是我想我完全错了

i really don´t know what to do, i also tryed to make an array of the options, sort and append them to the select but i guess i´m trying total wrong

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

maybe someone has already solved this?

选择必须为倍数= true

the select must be a multiple=true

摆弄我的问题的小提琴

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

提前感谢，以获取 任何 提示

thanks in advance, for any hint

推荐答案

您可以执行以下操作:(有效但未优化)

You can do this : (working but not optimized)

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

现在它可以正常工作了小提琴

Now it works Fiddle

如果需要，可以将一些data存储到li列表中，以便在排序功能中使用它们，例如:

If you want you can store some data to the li list, to use them within the sort function, like :

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

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

And retrieve them like this : (in the .each of the sort function)

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

这篇关于jQuery UI .sortable()触发选择排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！