Help required with conditional options in a select box
Hi,
Hoping someone can help me...
I have a JSP that contains a question...
If the user selects 'Yes', I need to display a select box with values a, b, c.
If the user selects 'No', I need to reveal a select box with values a, b & c but with extra values d & e.
At the moment, I have some javascript which works to toggle each box when the answer to the questions changes. Both boxes reference the same property in the bean.
The problem:
I can see that the value selected for each box is being held in memory, and this can result in an incorrect (previously selected) value being sent to the bean's set method.
Can someone help me with this?
Eg. Is there a way of conditionally displaying the options within a select box (that way only one box would be required) or a way of uniquely identifying each box so perhaps the value in memory can be cleared when the user changes their mind?
The boxes are currently defined something like this:
<html:select property="employmentStatus">
<html:option value="a">Please select</html:option>
<html:option value="b">Employed</html:option>
<html:option value="c">Self-employed</html:option>
</html:select>
<html:select property="employmentStatus">
<html:option value="a">Please select</html:option>
<html:option value="b">Employed</html:option>
<html:option value="c">Self-employed</html:option>
<html:option value="d">Retired</html:option>
<html:option value="e">Other</html:option>
</html:select>
(sorry, the real code is at work and I'm home now!)
Any help greatly appreciated.
[2051 byte] By [
Nicstera] at [2007-11-27 4:01:38]
# 1
1 - use a hidden input with empty value
<html:hidden name="_employmentStatus" value="">
On the server side check the hidden value.
2 - You can have only one select box and add dynamically options using javascript:
var optionA = new Option('a', 'a');//(name, value)
var optionB = new Option('b', 'b');
document.getElementById('selectBoxId').options[(document.
getElementById('selectBoxId').length)] = optionA;
document.getElementById('selectBoxId').options[(document.
getElementById('selectBoxId').length)] = optionB;
# 2
You didn't mention if you wanted a javascript solution or a servlet/jsp solution. This is what we use for a boolean condition using a custom object type: Column that has getters/setters and an expression variable selTitle.
<select id="column" name="column" size="10">
<%
if(hasSelected) {
if(ColData != null){
for(int i = 0; i < ColData.size(); i++) {
Column adc = (Column) ColData.get(i);
String selTitle = (String) adc.getColumnTitle();
%>
<option value='<%=selTitle%>'><%=selTitle%></option>
<%
}
}
You could modify this code to include both option selects based on a boolean condition.
}
%>
</select>
# 3
Hi,
Thank you both for your replies.
I'm pretty new to this so had a little trouble understanding your recommendations.
However, I've figured something out which could probably be prettier but I'm happy for now that it works!
In case anyone is interested, here's a description of the solution I've managed to get working:
o one select box is declared on the page, with no options specified.
o on page load, a javascript function is called which:
...hides the select box first time in (i.e the user has not answered my 'yes/no' question)
...shows the select box any other time (i.e. any time following the answering of the yes/no question), creates the correct options according to the answer provided, and sets one of the options to 'selected' based on a value retrieved from the bean. This value is declared as a hidden input on the page and a new getter method for this was added to the bean - it returns the actual value set when a selection is made from the box.
o in addition to the onload function, I also have a function that is invoked when the user clicks on the yes/no radio buttons. This function removes all the options from the select box, recreates the correct options according to the answer provided to the yes/no question, sets the selected option to my default value of 'Please select' and finally, makes sure the select box is actually shown.
Thank you again.
