JSF Populate A SINGLE (Not Multiple) Dropdown Based on Radio Button Selection

Question

I am going through the Oracle tutorials while taking a class for Java EE and I wanted to make a dropdown menu that populates based on which radio button is selected.

To further clarify as this was marked as duplicate and it is not. I have a radio button and a dropdown menu. I want my dropdown menu to populate with data from one of four arrays in my backing bean. If the selection of the radio button changes, I want the data in the dropdown to change based on what was selected in the radio selection.

Just to be clear, this is not for an assignment.

A snippet of some of the code I have is what you see below.

This code renders the dropdown with the string array that I have in my bean for "makeHonda". It automatically renders that whether or not it is selected. I would like it to update the dropdown with car models based on which radio button is clicked.

I have looked at several different questions here and also googled as well as looking through the Oracle tutorial and I just haven't found what I am looking for. Most questions I have seen seem to have their own context and are different than what I am trying to do.

These are in my bean

private String[] carMake = {"Honda", "Nissan", "Suzuki", "Toyota"};
private String[] makeHonda = {"Civic", "NSX"};
private String[] makeNissan = {"Fairlady 420Z", "Sylvia S13"};
private String[] makeSuzuki = {"Cappuccino", "Jimny"};
private String[] makeToyota = {"Altezza RS200", "Crown"};
private String makeSelection;
private String carModels;

This stuff is in the xhtml file

<label>Favorite Car Maker: </label>
<h:selectOneRadio id="carMake" value="#{controller.makeSelection}" required="true" label="Action">
    <f:selectItems value="#{controller.carMake}"/>
    <f:ajax render="carModels" />
</h:selectOneRadio>

<!-- Car Models Drop Down Appears After Car Selection -->
<label>Favorite Car Model: </label>
<h:selectOneMenu id="carModels" value="#{controller.carModels}">
    <f:selectItems value="#{controller.makeHonda}" rendered="#{controller.makeSelection eq 'Honda'}"/>
</h:selectOneMenu>

score 0 · Answer 1 · edited May 23 '17 at 10:30

I have solved my question with the help of another post that I will list at the end.

These are the changes that I made to my bean.

private String selectedMake;
private String[] availableModels;
private String[] carMakes = {"Honda", "Nissan", "Suzuki", "Toyota"};
private String[] makeHonda = {"Civic", "NSX"};
private String[] makeNissan = {"Fairlady 420Z", "Sylvia S13"};
private String[] makeSuzuki = {"Cappuccino", "Jimny"};
private String[] makeToyota = {"Altezza RS200", "Crown"};

public void changeModels(AjaxBehaviorEvent event) {
    if ("Honda".equals(selectedMake)) {
        availableModels = makeHonda;
    }
    if ("Nissan".equals(selectedMake)) {
        availableModels = makeNissan;
    }
    if ("Suzuki".equals(selectedMake)) {
        availableModels = makeSuzuki;
    }
    if ("Toyota".equals(selectedMake)) {
        availableModels = makeToyota;
    }
}

This is the changes that I made to my xhtml file.

<!-- Selection for Favorite Car Maker -->
        <p></p>
        <label>Favorite Car Maker: </label>
        <h:selectOneRadio id="carMake" value="#{controller.selectedMake}" required="true" label="Action">
            <f:selectItems value="#{controller.carMakes}"/>
            <f:ajax listener="#{controller.changeModels}" render="carModels" />
        </h:selectOneRadio>

        <!-- Car Models Drop Down Appears After Car Selection -->
        <label>Favorite Car Model: </label>
        <h:selectOneMenu id="carModels" value="#{controller.selectedMake}">
            <f:selectItem value="#{null}" itemLabel="-- select --" />
            <f:selectItems value="#{controller.availableModels}" />
        </h:selectOneMenu>

The post that I was linked to before was this.

In that post the user asks how to make multiple selectonemenu lists stemming from other selectonemenu lists. The answer there lead me to solving it, however it was a bit different than what I actually did.

What was so different that it was not a duplicate (which it in my opinion is) — Kukeltje, Apr 06 '17 at 12:41
He was creating a dropdown from one dropdown, then another dropdown then another dropdown in succession. Multiple dropdown boxes, not a single dropdown box that changes the data inside of it based off of a radio button. Also im not entirely sure what he was using `@EJB private SomeService someService;` for but my code does not use that. So my question and the way I solved it are different. — Morgan, Apr 06 '17 at 12:45
The concept does not differ if you have/use one or many related components. So that part does not really play a role. The `@EJB` might be different, but that is not the most relevant part, but great it works now... cheers — Kukeltje, Apr 06 '17 at 12:51

JSF Populate A SINGLE (Not Multiple) Dropdown Based on Radio Button Selection

1 Answers1