Consider the following scenario: we want to have two select boxes and we want to add options from one to the other and back.
Currently, this is not easily possible in Wicket, even though there are a lot of extensions available.
This blog describes an easy way to create a component which does just that!

  select transfer   select transfer


For creating a Select box there are multiple options available. You can use a ListChoice for selecting a single option or a ListMultipleChoice for selecting multiple options.

So how do we start?

Well, first we need to create two ListMultipleChoice object. Lets give them the following names: originals and destinations

As you can see below, this isn’t very hard.

and the matching HTML part:

Next we need two buttons, one for adding and one for removing options from a select box.

and the matching HTML part:

As you can see I use an AjaxButton, which is basically what you want for this example. We do not want to do a full page reload.

That’s it.

Next thing we want to do is create a component that does all of this, so we can reuse it. After analysing, I found out that we only need a method which retrieves all options. I have called it getOriginalChoices();
If you look into the attached example project, you can see that it is now very easy to use it.

To use the Component you need to do the following:

and the matching html

I have attached the example project here so you can look into the code yourself.