tk120404/MultiSelect

## MultiSelect
<!DOCTYPE html>
<html>
<head>
    <title>Multi Select</title>
    <style>
        #select-from, #select-to {
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>

        $(document).ready(function () {

            $.assocArraySize = function (obj) {
                var size = 0, key;
                for (key in obj) {
                    if (obj.hasOwnProperty(key)) size++;
                }
                return size;
            };

            function execution(from, to, all) {
                var selectedcomponent = {};
                if (all) {
                    from = from + ' option';
                }
                else {
                    from = from + ' option:selected';
                }
                $(from).each(function () {
                    var group = $(this).data('group');
                    var labelValue = $(this).data('label');
                    var comp = '<option value=""'+this.value+'" data-group="'+group+'" data-label="'+labelValue+'">'+this.text+'</option>';
                    if (selectedcomponent[group] == undefined) {
                        selectedcomponent[group] = [];
                    }
                    selectedcomponent[group].push(comp);
                    if ($(this).parent().children().length == 1) {

                        $(this).parent().remove();
                    } else {
                        $(this).remove();
                    }
                });

                var objectSize = $.assocArraySize(selectedcomponent);

                for (key in selectedcomponent) {
                    var optgroupComp = null;
                    if (selectedcomponent[key]) {
                        $.each(selectedcomponent[key], function (index, entry) {
                            var rightComp = to + ' optgroup#' + $(entry).data('group');
                            if ($(rightComp).length === 0) {

                                if (optgroupComp === null) {
                                    optgroupComp = $('<optgroup>');
                                    optgroupComp.attr('label', $(entry).data('label'));
                                    optgroupComp.attr('id', $(entry).data('group'));
                                }
                                optgroupComp.append(this);
                                $(to).append(optgroupComp);
                            } else {
                                $(rightComp).append(entry);
                            }
                            optgroupComp = null;
                        });
                    }
                }
            }

            $('#btn-add').click(function () {
                execution('#select-from', '#select-to', false);
            });

            $('#btn-addall').click(function () {
                execution('#select-from', '#select-to', true);
            });

            $('#btn-remove').click(function () {
                execution('#select-to', '#select-from', false);
            });

            $('#btn-removeall').click(function () {
                execution('#select-to', '#select-from', true);
            });

        });
    </script>
</head>
<body>

<select name="selectfrom" id="select-from" multiple size="5">
    <optgroup label="Group 1" id="group1">
        <option value="1" data-group="group1" data-label='Group 1'>Option 1a</option>
        <option value="2" data-group="group1" data-label='Group 1'>Option 1b</option>
    </optgroup>
    <optgroup label="Group 2" id="group2">
        <option value="3" data-group="group2" data-label='Group 2'>Option 2a</option>
        <option value="4" data-group="group2" data-label='Group 2'>Option 2b</option>
    </optgroup>
</select>

<a href="JavaScript:void(0);" id="btn-add">Add</a>
<a href="JavaScript:void(0);" id="btn-addall">Add All</a>
<a href="JavaScript:void(0);" id="btn-removeall">Remove all</a>
<a href="JavaScript:void(0);" id="btn-remove">Remove</a>

<select name="selectto" id="select-to" multiple size="5">
    <optgroup label="Group 3" id="group3">
        <option value="5" data-group="group3" data-label='Group 3'>Option 3a</option>
        <option value="6" data-group="group3" data-label='Group 3'>Option 3b</option>
    </optgroup>
    <optgroup label="Group 4" id="group4">
        <option value="7" data-group="group4" data-label='Group 4'>Option 4a</option>
        <option value="8" data-group="group4" data-label='Group 4'>Option 4b</option>
    </optgroup>
</select>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Multi Select</title>
	<style>
	#select-from, #select-to {
	width: 200px;
	height: 200px;
	}
	</style>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script>

	$(document).ready(function () {

	$.assocArraySize = function (obj) {
	var size = 0, key;
	for (key in obj) {
	if (obj.hasOwnProperty(key)) size++;
	}
	return size;
	};

	function execution(from, to, all) {
	var selectedcomponent = {};
	if (all) {
	from = from + ' option';
	}
	else {
	from = from + ' option:selected';
	}
	$(from).each(function () {
	var group = $(this).data('group');
	var labelValue = $(this).data('label');
	var comp = '<option value=""'+this.value+'" data-group="'+group+'" data-label="'+labelValue+'">'+this.text+'</option>';
	if (selectedcomponent[group] == undefined) {
	selectedcomponent[group] = [];
	}
	selectedcomponent[group].push(comp);
	if ($(this).parent().children().length == 1) {

	$(this).parent().remove();
	} else {
	$(this).remove();
	}
	});

	var objectSize = $.assocArraySize(selectedcomponent);

	for (key in selectedcomponent) {
	var optgroupComp = null;
	if (selectedcomponent[key]) {
	$.each(selectedcomponent[key], function (index, entry) {
	var rightComp = to + ' optgroup#' + $(entry).data('group');
	if ($(rightComp).length === 0) {

	if (optgroupComp === null) {
	optgroupComp = $('<optgroup>');
	optgroupComp.attr('label', $(entry).data('label'));
	optgroupComp.attr('id', $(entry).data('group'));
	}
	optgroupComp.append(this);
	$(to).append(optgroupComp);
	} else {
	$(rightComp).append(entry);
	}
	optgroupComp = null;
	});
	}
	}
	}

	$('#btn-add').click(function () {
	execution('#select-from', '#select-to', false);
	});

	$('#btn-addall').click(function () {
	execution('#select-from', '#select-to', true);
	});

	$('#btn-remove').click(function () {
	execution('#select-to', '#select-from', false);
	});

	$('#btn-removeall').click(function () {
	execution('#select-to', '#select-from', true);
	});

	});
	</script>
	</head>
	<body>

	<select name="selectfrom" id="select-from" multiple size="5">
	<optgroup label="Group 1" id="group1">
	<option value="1" data-group="group1" data-label='Group 1'>Option 1a</option>
	<option value="2" data-group="group1" data-label='Group 1'>Option 1b</option>
	</optgroup>
	<optgroup label="Group 2" id="group2">
	<option value="3" data-group="group2" data-label='Group 2'>Option 2a</option>
	<option value="4" data-group="group2" data-label='Group 2'>Option 2b</option>
	</optgroup>
	</select>

	<a href="JavaScript:void(0);" id="btn-add">Add</a>
	<a href="JavaScript:void(0);" id="btn-addall">Add All</a>
	<a href="JavaScript:void(0);" id="btn-removeall">Remove all</a>
	<a href="JavaScript:void(0);" id="btn-remove">Remove</a>

	<select name="selectto" id="select-to" multiple size="5">
	<optgroup label="Group 3" id="group3">
	<option value="5" data-group="group3" data-label='Group 3'>Option 3a</option>
	<option value="6" data-group="group3" data-label='Group 3'>Option 3b</option>
	</optgroup>
	<optgroup label="Group 4" id="group4">
	<option value="7" data-group="group4" data-label='Group 4'>Option 4a</option>
	<option value="8" data-group="group4" data-label='Group 4'>Option 4b</option>
	</optgroup>
	</select>


	</body>
	</html>