Move items between 2 listbox

[GuillParticipant]

Hello,

I need to move items between 2 listboxes : items from listA to listB or listB to listA
I need also to use drag and drop betweed lists.
So, I have created 2 listboxes and 2 buttons : first for moving all items from list A to list B, second for moving all items from list B to list A.
When I click on a button, items are copied to target list but not removed from source (I use “clear” method).
Other problem, the drag and drop don’t work after this operation.

This is the code for HTML part :

<table>
    <tr>
	    <td>
		    <select id="selectcolsavailables">
			    <option value="address">Address</option>
				<option value="age">Age</option>
				<option value="civility">Civility</option>
				<option value="birthdate">Birthdate</option>
				<option value="email">Email</option>
				<option value="phone">Phone</option>
				<option value="city">City</option>
			</select>
		</td>
		<td width="186" style="text-align:center;">
            <input type="submit" value="Add all >>" id="colsaddallButton"/><br><br>
            <input type="submit" value="<< Delete all" id="colsremoveButton"/>
		</td>
		<td>
			<select id="selectcolsvisibles">
				<option value="name">Name</option>
				<option value="firstname">Firstname</option>
				<option value="zipcode">Zip Code</option>
			</select>
		</td>
	</tr>
</table>

and the code for javascript part :

// function to move items from a list A to list B
function move_list_items(listA,listB) {
    var i = 0;
    var item;
    // begin the update
    $("#"+listA).jqxListBox('beginUpdate');
    $("#"+listB).jqxListBox('beginUpdate');
    // copy items from A to B
    for (i=0; i<$("#"+listA).jqxListBox('getItems').length; i++) {
        item = $("#"+listA).jqxListBox('getItem', i);
        $("#"+listB).jqxListBox('addItem', { label: item.label, value: item.value} );
    }
    // delete all items from A
    $("#"+listA).jqxListBox('clear');
    // end update
    $("#"+listA).jqxListBox('endUpdate');
    $("#"+listB).jqxListBox('endUpdate');
}

// create list boxes
$("#selectcolsavailables").jqxListBox({
	theme: 'energyblue',
	width: 300,
    height: 430,
	allowDrag: true,
	allowDrop: true
});
$("#selectcolsvisibles").jqxListBox({
	theme: 'energyblue',
	width: 300,
	height: 430,
	allowDrag: true,
	allowDrop: true
});
// create buttons
$("#colsaddallButton").jqxButton({theme: 'energyblue', width: 140});
$("#colsaddallButton").on('click', function () {
    move_list_items('selectcolsavailables','selectcolsvisibles');
});
$("#colsremoveButton").jqxButton({theme: 'energyblue', width: 140});
$("#colsremoveButton").on('click', function () {
    move_list_items('selectcolsvisibles','selectcolsavailables');
});

What’s wrong with my code please ?

Thanks for your help.

[ivailoParticipant]

Hi Guill,

You can try this like a workaround.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[GuillParticipant]

Thank you very much, ivailo!

I have another question : how to specify the value and the text for an element in the source ? Do you have an example to do this ? I need to read value of each element.

[GuillParticipant]

Oher question : how can I sort the listA by text after moving items from listB in this listbox ?

Thanks in advance

[ivailoParticipant]

Hi Guill,

You can use arrays of objects like this demo. There you can add the value option.

About the sorting just use sort(). Here is the same fiddle with sorting.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[GuillParticipant]

Thanks!

[Author]

Posts