jquery - move select box items with groups from one list to another

In the page has two MultiSelect List box with , some items in one box and another one is empty. Able to move items between the two multiselect boxes. We should be even able to move multiple items with group. Here the following example.

<table cellspacing="10" cellpadding="10" border="0">
<tr>
    <td>
        <select multiple id="select1" class="w100p" size="20" maxlength="100">              
            <optgroup label="Group 1">
                <option value="1">Option 1a</option>
                <option value="2">Option 1b</option>
                <option value="2">Option 1c</option>
                <option value="2">Option 1d</option>
                <option value="2">Option 1e</option>
                <option value="2">Option 1f</option>
            </optgroup>
            <optgroup label="Group 2">
                <option value="3">Option 2a</option>
                <option value="4">Option 2b</option>
                <option value="4">Option 2c</option>
                <option value="4">Option 2d</option>
                <option value="4">Option 2e</option>
                <option value="4">Option 2f</option>
                <option value="4">Option 2g</option>
                <option value="4">Option 2h</option>
            </optgroup>
        </select>
    </td>
    <td>
        <a href="#" id="add">add >></a>
        <br>
        <a href="#" id="remove"><< remove</a>
    </td>
    <td>
        <select multiple id="select2" class="w100p" size="20" maxlength="100"></select>
    </td>
</tr>
</table>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script "text/javascript">
var $select1 = $('#select1');
    var $select2 = $('#select2');

    $([$select1, $select2]).each(function(){
        $(this).find('optgroup').each(function(idx){
            var ogId = 'og' + idx;
            $(this).attr('id', ogId);
            $(this).find('option').each(function(){
                $(this).data('parent', ogId);
            });
        });
    });

    $('#add').click(function() {
        processOptions($select1, $select2);
    });
    $('#remove').click(function() {
        processOptions($select2, $select1);
    });

    var optgFoundInTarget = {};

    function processOptions(source, target) {
        var selectedOptions = $(source).find('option:selected');
        if (selectedOptions.length) {
            selectedOptions.each(function(){
                var movingFromOptGroup = $(this).parent();
                parentOg = $(movingFromOptGroup).attr('id');
                if (parentOg.indexOf('_target') > -1) {
                    parentOg = parentOg.replace('_target', '');
                } else {
                    parentOg += '_target';
                }
                if (typeof optgFoundInTarget[parentOg] == 'object') {
                } else {
                    if (target.find('optgroup#'+parentOg).length) {
                        _el = target.find('optgroup#'+parentOg);
                    } else {
                        _el = $('<optgroup id="' + $(movingFromOptGroup).attr('id') + '_target" label="' + $(movingFromOptGroup).attr('label') + '" />').appendTo(target);
                    }
                    optgFoundInTarget[parentOg] = _el;
                }
                targetOptGroup = optgFoundInTarget[parentOg];
                $(this).data('parent', $(targetOptGroup).attr('id')).appendTo(targetOptGroup);
            });
            $([source, target]).each(function(){
                $(this).find('optgroup').each(function(){
                    $(this).css('display', $(this).find('option').length ? 'inline' : 'none');
                })
            });
            target.val(null);
        }
    }
</script>

OUTPUT:

                 

Jquery - move select box items from one list to another

In the page has two MultiSelect List elements with some items in them. Able to move items between the two multiselect boxes. We should be even able to move multiple items or all items at once. Here the following example.

Example:

 <select id="sbOne" multiple="multiple" size="20" maxlength="100">
        <option value="1">Alpha</option>
        <option value="2">Beta</option>
        <option value="3">Gamma</option>
        <option value="4">Delta</option>
        <option value="5">Epsilon</option>
 </select>
 <select id="sbTwo" multiple="multiple" size="20" maxlength="100">
        <option value="6">Zeta</option>
        <option value="7">Eta</option>
    </select>
    <br />
    <input type="button" id="left" value="<" />
    <input type="button" id="right" value=">" />
    <input type="button" id="leftall" value="<<" />
    <input type="button" id="rightall" value=">>" />

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script  type="text/javascript">
function moveItems(origin, dest) {
    $(origin).find(':selected').appendTo(dest);
}

function moveAllItems(origin, dest) {
    $(origin).children().appendTo(dest);
}

$('#left').click(function () {
    moveItems('#sbTwo', '#sbOne');
});

$('#right').on('click', function () {
    moveItems('#sbOne', '#sbTwo');
});

$('#leftall').on('click', function () {
    moveAllItems('#sbTwo', '#sbOne');
});

$('#rightall').on('click', function () {
    moveAllItems('#sbOne', '#sbTwo');
});
</script>

DEMO : http://www.jquerycookbook.com/demos/S4-DropDownULLists/43-MoveMultiSelectListItems.html

Jquery - horizontal scroll bar in select box

Trying to add horizontal scroll bar in select box. Its very simple. Here follow the code and see the example.

<div id='Courselists' style="overflow-x:scroll; width:200px; overflow: -moz-scrollbars-horizontal;">
<select id='Courses' name="mySelect" size="15">
    <option value="5">Ajax</option>
    <option value="9">Animal</option>
    <option value="6">HETC course1</option>
    <option value="10">HTML</option>
    <option value="3">Java</option>
    <option value="4">mysql</option>
    <option value="11">Photoshop</option>
    <option value="2">PHP</option>
    <option value="8">Science</option>
    <option value="7">Test course: XS</option>
    <option value="12">Test test Test test Test test Test test Test test </option>
</select>
<div id="Scrolldiv" style='font-size: 1px'>&nbsp</div>
</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $('#Scrolldiv').css('width', $('#Courses').outerWidth());
    $('#Courses').css('width', $('#Courselists').outerWidth());
    $( "#Courselists" ).scroll(function() {
        $('#Courses').css('width', $(this).outerWidth() + $(this).scrollLeft());
    });
</script>

OUTPUT:
                 

Special thanks to Cyrus .