Download It – Struts2-UpDownSelect-Example.zip

In Struts 2, <s:updownselect> tag is used to create a HTML Select component with buttons to move up or down the options in the Select component. When the form is submitted, all the select options will be submitted in the order they are arranged.

<s:updownselect> example

<s:updownselect
list="#{'KFC':'KFC', 'McDonald':'McDonald', 'Burger King':'Burger King',
'Pizza Hut':'Pizza Hut', 'Fat Boy King':'Fat Boy King'}"
name="favFastFood"
headerKey="-1"
headerValue="--- Please Order ---" 
size="7"
/>

Resulting the following HTML code, select components, buttons and JavaScript to move up and move down the options in the Select component. (Default xhtml theme)

<tr> 
<td class="tdLabel"></td> 
<td><script type="text/javascript" src="/Struts2Example/struts/optiontransferselect.js">
</script> 
<table> 
<tr><td> 
<select name="favFastFood" size="7" 
id="resultAction_favFastFood" multiple="multiple"> 
    <option value="-1">--- Please Order ---</option> 
    <option value="KFC">KFC</option> 
    <option value="McDonald">McDonald</option> 
    <option value="Burger King">Burger King</option> 
    <option value="Pizza Hut">Pizza Hut</option> 
    <option value="Fat Boy King">Fat Boy King</option> 
</select> 
<input type="hidden" id="__multiselect_resultAction_favFastFood" 
name="__multiselect_favFastFood" value="" /> 
</td></tr> 
<tr><td> 
&nbsp;<input type="button" value="^" onclick="
moveOptionUp(document.getElementById('resultAction_favFastFood'), 'key', '-1');" />
 
&nbsp;<input type="button" value="v" onclick="
moveOptionDown(document.getElementById('resultAction_favFastFood'), 'key', '-1');" />
 
&nbsp;<input type="button" value="*" onclick="selectAllOptionsExceptSome(
document.getElementById('resultAction_favFastFood'), 'key', '-1');" />
</td></tr> 
</table></td> 
</tr> 
<script type="text/javascript"> 
 
var containingForm = document.getElementById("resultAction");
StrutsUtils.addEventListener(containingForm, "submit", 
   function(evt) {
     var updownselectObj = document.getElementById("resultAction_favFastFood");
     selectAllOptionsExceptSome(updownselectObj, "key", "-1");
   }, true);
</script>

Struts 2 <s:updownselect> example

A complete full example of the <s:updownselect> tag to show the use of OGNL and Java lists to populate the data to the updown select lists.

1. Action class

Action class to generate and store the select options.

UpDownSelectAction.java

package com.mkyong.common.action;
 
import java.util.ArrayList;
import java.util.List;
 
import com.opensymphony.xwork2.ActionSupport;
 
public class UpDownSelectAction extends ActionSupport{
 
	private List<String> moviesList = new ArrayList<String>();
 
	private String favMovie;
	private String favFastFood;
 
	public UpDownSelectAction(){
 
		moviesList.add("Spider Man");
		moviesList.add("Matrix");
		moviesList.add("Super Man");
		moviesList.add("Dark Knight");
		moviesList.add("BraveHeart");
		moviesList.add("Ultraman");
 
	}
 
	public String getFavFastFood() {
		return favFastFood;
	}
 
	public void setFavFastFood(String favFastFood) {
		this.favFastFood = favFastFood;
	}
 
	public List<String> getMoviesList() {
		return moviesList;
	}
 
	public void setMoviesList(List<String> moviesList) {
		this.moviesList = moviesList;
	}
 
	public String getFavMovie() {
		return favMovie;
	}
 
	public void setFavMovie(String favMovie) {
		this.favMovie = favMovie;
	}
 
	public String execute() throws Exception{
 
		return SUCCESS;
	}
 
	public String display() {
		return NONE;
	}
 
}

2. Result Page

Render the updown select component via “<s:updownselect>” tag.

updownselect.jsp

<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<s:head />
</head>
 
<body>
<h1>Struts 2 updownselect example</h1>
 
<s:form action="resultAction" namespace="/" method="POST" >
 
<s:updownselect
list="#{'KFC':'KFC', 'McDonald':'McDonald', 'Burger King':'Burger King',
'Pizza Hut':'Pizza Hut', 'Fat Boy King':'Fat Boy King'}"
name="favFastFood"
headerKey="-1"
headerValue="--- Please Order ---" 
size="7"
/>
 
<s:updownselect
list="moviesList"
name="favMovie"
headerKey="-1"
headerValue="--- Please Order ---"
size="10"
moveUpLabel="Move Up"
moveDownLabel="Move Down"
selectAllLabel="Select All" />
 
<s:submit value="submit" name="submit" />
 
</s:form>
 
</body>
</html>

result.jsp

<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
 
<body>
<h1>Struts 2 updownselect example</h1>
 
<h4>
   Favor fast food : <s:property value="favFastFood"/> 
</h4> 
 
<h4>
   Favor movies : <s:property value="favMovie"/> 
</h4> 
 
</body>
</html>

3. struts.xml

Link it all ~

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
 
<struts>
 
    <constant name="struts.devMode" value="true" />
 
   <package name="default" namespace="/" extends="struts-default">
 
   <action name="updownSelectAction" 
       class="com.mkyong.common.action.UpDownSelectAction" method="display">
       <result name="none">pages/updownselect.jsp</result>
   </action>
 
   <action name="resultAction" class="com.mkyong.common.action.UpDownSelectAction" >
       <result name="success">pages/result.jsp</result>
   </action>
  </package>
 
</struts>

4. Demo

http://localhost:8080/Struts2Example/updownSelectAction.action
Select option and move it up or down.

Struts 2 updownselect example

When you submit, all the options will be submitted in the order they are arranged.

Struts 2 updownselect example

Reference

  1. Struts 2 updownselect example
  2. http://www.mkyong.com/struts2/struts-2-sdoubleselect-example/
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at Struts 2.x Tutorials