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

Solution 1:

You can do this : (working but not optimized)

jQuery(document).ready(function ($) {
  functionsort() {
    $('.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 :

<liclass='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');