my dog learned polymorphism*
The moose likes HTML, CSS and JavaScript and the fly likes Web UI: how to select and add items from 1 list to another list Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Web UI: how to select and add items from 1 list to another list" Watch "Web UI: how to select and add items from 1 list to another list" New topic
Author

Web UI: how to select and add items from 1 list to another list

H Paul
Ranch Hand

Joined: Jul 26, 2011
Posts: 471
    
    4
<thanks>This is web ui related but I do not where to put it. Move if needed.</thanks>

What/where/how can I do the following or is there any existing UI features for the following:

1. There is a list of predefined items on the right. LIST R (whatever UI that is appropriate)

2. There is a list of selected items on the left. LIST L (whatever UI that is appropriate)

3. There is an ADD button to add the item(s) that the user selected from LIST R to LIST L.

4. There is a REMOVE button to remove selected item(s) LIST L.

5. On submit, the server will get a list of items from LIST L in the order it was selected.
This is the main requirement because the back-end expect a list of items in the order it was selected.

For those who are familiar with Eclispe: Add or Remove Projects to the server. This is a kind of similar web UI I'm looking for.

1M Thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61772
    
  67

By "web UI" do you mean HTML?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
H Paul
Ranch Hand

Joined: Jul 26, 2011
Posts: 471
    
    4
Yes.

There are so many web frameworks out there. I am not sure.

What I'am looking for is something simple just enough to do the job.
Komal Renu
Ranch Hand

Joined: Jul 21, 2011
Posts: 51
Hi Paul,

From your requirements following is the solution I could provide.
I have implemented the same thing in one of my projects using jsp and javascript.
Here's what you need to do:

1. On your jsp, define a multibox (<select> with multiple true), one for List L, and other one for List R.
2. Assign form properties to these two select boxes.
3. Between the two list boxes you can give an arrow image to point from left to right (or any such image/button etc to on click of which the selected values should transfer to List R).
4. Now once the user has selected multiple values from the List L and then clicks on the image/button, use javascript to iterate over elements of list L and pick up the selected ones and keep adding them to an Array.
5. Lastly get the elemet for List R, by document.getElementById() and assign that array to the List R

Hope this helps.

Thanks and Regards,
-------------------------------------------------------------------------------------
Komal Renu | krenu@infocepts.com | www.infocepts.com
-------------------------------------------------------------------------------------
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Web UI: how to select and add items from 1 list to another list