Dynamically Allocate Array lists to options in a dropdown for struts JSP

[Vertika Solanki]

The situtation is ...
When user selects a value from Dropdown 1. Then depending on the value selected another dropdown should be populated from 1 of 2 diffrent Araaylist in struts form.

I'm absloutely naive at AJAX. I don't know how AJAX will work here.

The deciding dropdpwn is

  
<td class="LLFormInputText" >
      <html:select styleClass="text" name="tradeForm" property="tradeGroup" tabindex="1" onkeypress="return goReturn(event,0);" onchange="showHide();" >
      <bean:define id="tradeGpOptions" name="tradeForm" property="tradeGpOptions" type="java.util.ArrayList" />
      <html:options collection="tradeGpOptions" property="value" labelProperty="label" />
      </html:select>	
</td>
  

The one that needs to be set is

  
<td id="tmsSecurityCodeType" class="LLFormInputText" >
  <html:select styleClass="text" name="tradeForm" property="securityCodeType" tabindex="8" onkeypress="return goReturn(event,0);" >
  <bean:define id="secCodeTypeOptions" name="tradeForm" property="secCodeTypeOptions" type="java.util.ArrayList"  />
  <html:options collection="secCodeTypeOptions" property="value" labelProperty="label"/>
</html:select>	
</td>	

// OR	
<td id="intlSecurityCodeType" class="LLFormInputText"  >
  <html:select styleClass="text" name="tradeForm" property="securityCodeTypeIntl" tabindex="8" onkeypress="return goReturn(event,0);">
  <bean:define id="secCodeTypeOptionsIntl" name="tradeForm" property="secCodeTypeOptions" type="java.util.ArrayList"  />
  <html:options collection="secCodeTypeOptionsIntl" property="value" labelProperty="label"/>
  </html:select>	
</td>

I tried hiding and showing them as required .

  
function showHide(){

document.getElementById('tmsSecurityCodeType').style.display = 'none';
document.getElementById('intlSecurityCodeType').style.display = 'none';

var tradeGp = document.getElementById('tradeGroup').value;
				
if( tradeGp == "TMS" ){

document.getElementById('tmsSecurityCodeType').style.display = 'inline';
document.getElementById('intlSecurityCodeType').style.display = 'none';

}else if ( tradeGp == 'FISSMC' || tradeGp == 'FISSEU' || tradeGp == 'FISSAS' || tradeGp == 'TRANSRPT'){
						
document.getElementById('tmsSecurityCodeType').style.display = 'none';
document.getElementById('intlSecurityCodeType').style.display = 'inline';
						
}

but when the form is submitted it doesn't take the value for the secCodeTypeOptions options even when it is displayed rather it picks up the first value from the secCodeTypeOptionsIntl array

I would appreciate if someone can tell me where I'm wrong ....please help me how can I get thru ....

[Bear Bibeault]

Please do not cross-post the same question in multiple forums. It wastes people's time when multiple redundant conversations take place. Please read this for more information.