Meyyappan has posted 101 posts at DZone. View Full User Profile

Struts HTML Select Tag Tutorial

06.14.2012
| 57149 views |
  • submit to reddit

In this example we will see two different methods to populate a dropdown box in the jsp page. We use HTML select tag to do this. The dropdown values are stored in two ArrayList namely countryList and stateList. We use HTML optionsCollection tag to display the values present in the ArrayList.

In order to use the Struts HTML Tags you need to include the following taglib directive in the jsp page.

<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>

To use the Struts HTML Tag Library you need to add the following <taglib> subelement to the web.xml file.

<taglib>
    <taglib-uri>/WEB-INF/struts-html.tld</taglib-uri>
    <taglib-location>/WEB-INF/struts-html.tld</taglib-location>
</taglib>

The jsp page contains two dropdowns one for displaying the country and the other for displaying the state. The jsp page contains the following code.

<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<html:form action="/inputAction" >
<table>
    <tr>
        <td>
        	Select Country :
        </td>
        <td>
            <html:select property="country" >
                <html:option value="0">Select Country</html:option>
                <html:optionsCollection name="InputForm" property="countryList" label="countryName" value="countryId" />
            </html:select>
        </td>
    </tr>
    <tr>
        <td>
        	Select State :
        </td>
        <td>
            <html:select property="state" >
                <html:option value="0">Select State</html:option>
                <html:optionsCollection name="InputForm" property="stateList" label="label" value="value" />
            </html:select>
        </td>
    </tr>
    <tr>
    <td colspan="2" align="center">
    	<html:submit property="method" value="save" />
    </td>
    </tr>
</table>
</html:form>
</body>
</html>

The CountryData class is used to hold the details regarding the country. The CountryData class has countryId and countryName as attributes and the corresponding getter and setter methods. In the jsp page we use the following code to display the country list.

<html:select property="country" >
<html:option value="0">Select Country</html:option>
<html:optionsCollection name="InputForm" property="countryList"
label="countryName" value="countryId" />
</html:select>

Here we need to display the countryName as the label and the countryId as the corresponding value. We do this using the label and the value attribute of the HTML optionsCollection tag.

The property attribute of the HTML optionsCollection tag holds the ArrayList.

The property attribute of the HTML select tag hold the country value selected by the user.

The input form contains the following attributes.

// holds the country selected by the user
private String country;
// holds the state selected by the user.
private String state;
// holds the list of countries to be displayed.
private ArrayList countryList;
// holds the list of state to be displayed.
private ArrayList stateList;

Here we use DispatchAction. One method is used to populate the values and the other method is used to save the selected values. Inside the populate method we populate the values for countryList and the stateList. The following code is used to add a list of countries to the countryList.

ArrayList countryList = new ArrayList();
countryList.add(new CountryData("1", "USA"));
countryList.add(new CountryData("2", "Canada"));
countryList.add(new CountryData("3", "Mexico"));

We add CountryData object inside the countryList. Creating a seperate class like this and adding it to ArrayList will be helpful if we have a few more attributes and methods corresponding to it other than the label and value.

If we have only label and value then we can use the LabelValueBean class to add the label and value to the ArrayList. We populate the stateList using the LabelValueBean class. The following code is used to populate the stateList in the action class.

ArrayList stateList = new ArrayList();
stateList.add(new LabelValueBean("New York", "1"));
stateList.add(new LabelValueBean("California", "2"));
stateList.add(new LabelValueBean("Los Angeles", "3"));

The following code is used to dispaly the state list in the jsp page.

<html:select property="state" >
<html:option value="0">Select State</html:option>
<html:optionsCollection name="InputForm" property="stateList"
label="label" value="value" />
</html:select>

On executing the example the following page will be dispalyed to the user.

The country and the state dropdowns are populate with the values present in the array list.

You can download the source code of the HTML Select Tag example by clicking on the Download link below.

Source :Download
Source + Lib :Download

 

Published at DZone with permission of its author, Meyyappan Muthuraman.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: