Calling a JS function inside "<option> ? </option> "

[Solarpitch]

Hey,

 

I thought I'd post this one because I will be days trying to sort it!

 

Below I have a simple JS function that changes the properties in a child list box based on the value in the parent list box. I think I need to call the JS function inside the <option> tags of the child list box to get the result I want but I am not sure...

 

snippet..

 

//Variables

var Accessories = new Array("Bag Accessories","Gloves","GPS Devices","Head Covers","Health & Fitness","Other","Practice Aids","Spikes & Wrenches","Tees","Umbrellas");

var Bags = new Array("Carry & Stand Bags","Electric Trolleys","Shoe Bags","Tour Bags","Other");

//function

function oselect(Title)
{


var mselect = window.document.form1.sub_category;
var boxx = eval(Title);
setopt(window.document.form1.sub_category, boxx);
}
function setopt(ychoice, boxx)
{
for (loop=0; loop < ychoice.options.length; loop++)
{
ychoice.options[loop].text = boxx[loop];
}
}

HTML ***************

<select name="category" id="standard_field" "" "" "" <--- Parent 

<select name="sub_category" id="standard_field" onChange="oselect(window.document.form1.category.options[selectedIndex].text);">
                            <option value=><script> setopt(); </script></option></select>

 

When the user clicks an option in "category" it populates the "sub_category" list box with the an array of the defined variables. I can get it to change no problem I just cant get it to calculate the amount of rows the list box will need based on the array.

 

So if Bags is chosen as the category, it will change the sub_category to 5 listed options(rows)...

 

var Bags = new Array("Carry & Stand Bags","Electric Trolleys","Shoe Bags","Tour Bags","Other");

 

 

Hope thats explained ok! )

 

Thanks!

[fenway]

This is the standard issue of having dependent list boxes -- you can do with parallel JS arrays, or with AJAX.