Jquery UI .sortable() trigger select sort

问题

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

here is my function

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

and here´s my 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?

the select must be a multiple=true

heres a fiddle to visualize my problem

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

thanks in advance, for any hint

回答1:

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

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>

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

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

来源：https://stackoverflow.com/questions/15639795/jquery-ui-sortable-trigger-select-sort