https://www.schoeppenstedt.de/js/jquery.listselect.js

1(function ($) {
2    $.fn.listselect = function (options) {
3        var defaults = {
4            size: 10,
5            listTitle: "Verfügbar",
6            selectedTitle: "Gewählt"
7        }
8
9        var options = $.extend(defaults, options);
10
11        return this.each(function () {
12            var listContainer = $("<div style=\"margin-right: 5px; float: left; width: 200px;\"></div>");
13            if (options.listTitle && options.listTitle != '') listContainer.append("<strong>" + options.listTitle + "</strong>");
14
15            var selectedContainer = $("<div style=\"float: left; width: 200px;\"></div>");
16            if (options.selectedTitle && options.selectedTitle != '') selectedContainer.append("<strong>" + options.selectedTitle + "</strong>");
17
18            var selected = $(this);
19            listContainer.insertBefore(selected);
20            selectedContainer.insertAfter(listContainer);
21            selected.remove();
22			
23			var hiddenFieldsContainer = $("<div style=\"clear: both;\"></div>");
24			hiddenFieldsContainer.insertAfter(selectedContainer);
25			
26            var list = $("<select></select>");
27            var selectedValues = null;
28            if (selected.attr("selected")) {
29                selectedValues = selected.attr("selected").split(",");
30            }
31
32            var fieldname = selected.attr('name');
33			var fieldID = fieldname.replace("[]" , "");
34            selected.attr('name', '');
35            selected.attr('id', '');
36            selected.css("width", "100%");
37            list.css("width", "100%");
38
39            list.html(selected.html());
40            selected.html('');
41
42            selected.attr('size', options.size);
43            list.attr('size', options.size);
44
45            listContainer.append(list);
46            selectedContainer.append(selected);
47
48            list.bind("click", function () {
49				var option = $(this).find("option[value='" + $(this).val() + "']");
50				if(option.length > 0){
51					var hiddenObj = $("<input type=\"checkbox\" style=\"display: none\" checked=\"checked\" name=\"" + fieldname + "\" id=\"listselect_" + fieldID + "_" + $(this).val() + "\" value=\"" + $(this).val() + "\" />");
52	
53					option.remove();
54					selected.append(option);
55					hiddenFieldsContainer.append(hiddenObj);
56	
57					selected.val('');
58					list.val('');
59				}
60            });
61
62            selected.bind("click", function () {
63				var option = $(this).find("option[value='" + $(this).val() + "']");
64				if(option.length > 0){
65					var hiddenObj = $("#listselect_" + fieldID + "_" + $(this).val());
66					option.remove();
67					list.append(option);
68					hiddenObj.remove();
69	
70					selected.val('');
71					list.val('');
72				}
73            });
74			
75			hiddenFieldsContainer.append($("<input type=\"checkbox\" style=\"display: none\" name=\"" + fieldname + "\">"));
76            if (selectedValues != null && selectedValues.length > 0) {
77                for (var i = 0; i < selectedValues.length; i++) {
78					var option = list.find("option[value='" + selectedValues[i] + "']");
79					if(option.length > 0){;
80						var hiddenObj = $("<input type=\"checkbox\" style=\"display: none\" checked=\"checked\" name=\"" + fieldname + "\" id=\"listselect_" + fieldID + "_" + selectedValues[i] + "\" value=\"" + selectedValues[i] + "\" />");
81
82						option.remove();
83						selected.append(option);
84						hiddenFieldsContainer.append(hiddenObj);
85					}
86                }
87            }
88
89            selected.val('');
90            list.val('');
91
92        });
93    };
94})(jQuery);