Move Selected Items from One Multiple Select to Another

Move Selected Items from One Multiple Select to Another

A common task on Web pages is to select a subset of a given set of items. Depending on the page design and concept, you can use checkboxes or multiple select menus.

When using multiple select menus, people often make Javascript arrays to keep the item values and texts for both menus and fill/empty them via these arrays. They don’t need to do this.

The arguments [from] and [to] of the function moveItem are source and destination multiple select menu, respectively.
Variable [j] represents the length of the destination menu and, at thesame time, the index of the next free space for the new item.

Each chosen source selected item can be moved to the destination menu by creating a new destination item based on source item values and destroying the selected item in the source menu.

The key details are menu indexes. If the destination length has changed, the index is increased, and because the source item was deleted, the source index is taken by the next item and should be decreased.

Try the simple demo below. The script is Netscape compatible.


See also  Redefining Energy Management: Advanced Solutions for Modern Buildings

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist