Friday, March 27, 2015

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




No comments:

Post a Comment