Создать сортируемый список jQuery в Grails

Question

Я хочу создать сортируемый список, используя Jquery в Grails. Этот список должен быть заполнен раскрывающимся списком. Вот поток:

(1) Пользователь выбирает item1 из выпадающего списка, item1 отображается в сортируемом списке

(2) Пользователь выбирает элемент 3 из выпадающего списка, элемент 3 отображается в сортируемом списке

(3) Пользователь выбирает item5 из выпадающего списка, item5 появляется в сортируемом списке

Затем пользователь может изменить порядок сортировки списка так, как он хочет, и сохранить его в списке. Это должен быть список, потому что последовательность важна для поддержания. В настоящее время есть множественный выбор для выбора нескольких элементов, но нет способа сохранить их в порядке.

У меня установлен плагин Jquery в моем проекте. Я не уверен, как получить выбранный элемент из выпадающего списка. Между этими классами существует множество отношений.

<div class="fieldcontain ${hasErrors(bean: CarInstance, field: 'parts', 'error')} ">
<label for="parts">
    <g:message code="label" default="Car Parts" />
</label>
<g:select name="parts"
          from="${Parts.list()}"
          multiple="multiple"
          optionKey="id"
          size="5"
          optionValue="partName"
          class="many-to-many"/>

Любой совет будет полезен. Спасибо..

Answer 1

Обычно я предлагаю вам отделить разметку HTML от логики на стороне клиента и записать всю логику в отдельный файл javascript. Например, ваш код JavaScript может выглядеть так:

(function ($) {
    $('select').on('change', function () {
        var value = $(this).val();
        var text = $(this).find('option:selected').text();
        $('<div class="item" data-value="' + value + '">' + text + '</div>')
            .appendTo('#sortable');
    });
})(jQuery);

Посмотрите пример jsFiddle: http://jsfiddle.net/rsPW7/1/