Struts, javascript and two select options not working

[strutsprog06]

I am working on a struts application.
I am looking for a dual select option for form.
On selection of one the other filled with values.
The js script is working on ie but not on fire fox. I need a cross brwser platform script.
Does any one can help a cross browser script for dual select box.

My code:
Js FILE:

var empty_options = new Array("");
var housing = new Array("", "Aparts/Housing for Rent", "Rooms Shared", "Sublet/Temporary", "Housing Wanted", "Vacation Rentals", "Parking/Storage", "Real Estate for sale", "Housing swap");
var for_sale = new Array("", "Free", "General", "Baby & Kids Stuff", "Books", "Collectibles", "Clothes and Accessories", "Computer & Electronics", "Furniture", "Household", "Sporting goods", "Tickets", "Toys", "Tools");
var services =new Array("","Services");
var wanted =new Array ("", "Wanted");

function change_sub_category(cat_id, subcat_id) {
var category = document.getElementById(cat_id);
alert(category.selectedIndex);
var selected_category = category.options[category.selectedIndex].value;
alert(selected_category);
var sub_category = document.getElementById(subcat_id);
alert(sub_category);

for(var i = 0; i < sub_category.options.length; ) {
sub_category.remove(i);
}
if(selected_category == "Housing") {
var new_options = housing;
} else if(selected_category == "Sale") {
var new_options = for_sale;
} else if(selected_category == "Services") {
var new_options = services;
}else if(selected_category == "Wanted") {
var new_options = wanted;
} else {
var new_options = empty_options;
}
for(i = 0; i < new_options.length; i++) {
sub_category.options = new Option(new_options, new_options);
}
}

sTRUTS FORM: Part of code:

<html:form method='post' action='/HL_Processing_Post.do?mode=display'>
<table>
<tr>
<td align="right" valign="top">
*
<bean:message key="label.cat_id.postform" />
&nbsp;
</td>
<td>
<html:select onchange="change_sub_category('cat_id', 'subcat_id');" styleClass="cat_id" property="cat_id" >
<htmlption value="">
--Select One--
</htmlption>
<htmlption value="Housing">
Housing
</htmlption>
<htmlption value="Sale">
For Sale
</htmlption>
<htmlption value="Services">
Services
</htmlption>
<htmlption value="Wanted">
Wanted
</htmlption>
</html:select>
</td>
</tr>
<tr>
<td align="right" valign="top">
*
<bean:message key="label.subcat_id.postform" />
&nbsp;
</td>
<td>
<html:select styleClass="subcat_id" property="subcat_id" onfocus="change_sub_category('cat_id', 'subcat_id');">
<htmlption value="">--Select one--</htmlption>
</html:select>
</td>
</tr>
</table>
</form>

Can some one help, it is very urgent.

 

[feherke]

Hi

styleId Identifier to be assigned to this HTML element (renders an "id" attribute).

http://struts.apache.org/1.2.7/userGuide/struts-html.html#select

<html:select onchange="change_sub_category('cat_id', 'subcat_id');" style[red]Id[/red]="cat_id" property="cat_id" >

Feherke.

http://rootshell.be/~feherke/