By Chris http://jroller.com/page/cschalk? Entry = building_dependent_select_menus_in
Translation: icess http://blog.matrix.org.cn/page/icess
In web programs, you sometimes need to manage the selection button. (Note: for example, when registering a QQ number, you must select a province or region. The region varies dynamically according to the province) there are multiple ways to implement this selection button in JSF (Note: You can use ajax4jsf to implement more friendly components). Here we provide a simple implementation.
Defining the hashmaps as managed beans
Faces provides the ability to directly declare lists and maps as managed beans in the configuration file. once defined in the faces-config.xml, faces apps can use her through El expressions, we define the following maps
Countriesmap-A map of countries: France, United States, India.
This map will drive some maps: uscitiesmap, frcitiesmap and incitiesmap.
When you select a country name, the dependent list is automatically loaded based on the country name.
The hashmaps
Countriesmap
|
And the dependent city maps ..
Uscitiesmaps
|
Frcitiesmaps
|
Incitiesmap
|
Before selecting a country, we provide an emptycities map to display some prompts.
Emptycitiesmap
|
Note that these maps can also be dynamically created and driven from other locations, such as databases.
The following JSP code contains two select menus statements.
<%@ page contentType="text/html;charset=windows-1252"%> |
The page contains twoSelectonemenuComponents and their child componentsSelectitemsBound to the faces configuration file# {Countriesmap}And a list of cities changed by the selected country name.# {Deplist_backing.cities}Deplist_backingThe object is a managed bean Code as follows:
package backing;import java.util.Map;import javax.faces.component.html.HtmlSelectOneMenu;import javax.faces.context.FacesContext;import javax.faces.el.ValueBinding;public class DepList { HtmlSelectOneMenu inputCountry, inputCity; // Method which returns the cities Map // based on the value of inputCountry public Map getCities() { String cityMap = ""; if (inputCountry.getValue() != null) { String countryKey = inputCountry.getValue().toString(); if (countryKey.equals("fr")) cityMap = "FrCitiesMap"; else if (countryKey.equals("us")) cityMap = "UsCitiesMap"; else if (countryKey.equals("in")) cityMap = "InCitiesMap"; else cityMap = "EmptyCitiesMap"; } else { cityMap = "EmptyCitiesMap"; } cityMap = "#{" + cityMap + "}"; //retrieve correct cityMap and return FacesContext context = FacesContext.getCurrentInstance( ); ValueBinding binding; binding = context.getApplication().createValueBinding(cityMap); return (Map) binding.getValue(context); } public void setInputCountry(HtmlSelectOneMenu inputCountry) { this.inputCountry = inputCountry; } public HtmlSelectOneMenu getInputCountry() { return inputCountry; } public void setInputCity(HtmlSelectOneMenu inputCity) { this.inputCity = inputCity; } public HtmlSelectOneMenu getInputCity() { return inputCity; }} |
Note that the getcities method checks whether there are input values in inputcountry. If yes, It means loading the city map based on the selected country. This is done by accessing the city map in the managed bean ..
And finally the registration of the classDeplistAs managed BeanDeplist_backing.
<managed-bean> <managed-bean-name>Deplist_backing</managed-bean-name> <managed-bean-class>backing.DepList</managed-bean-class> <managed-bean-scope>request</managed-bean-scope></managed-bean> |
And that's it .. when you run the JSP page, you will be able to select the country first and then select the city name.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
