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
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