dynamic form

[judyw]

I am trying to build a form with many options depending on each other.

I purchased a script called dynamic list options with which I create arrays of options that populate select boxes like this:

<select name="productSwags" onChange="PopulateOptions(this, 'productFabric');">

I can also create arrays like this:

var Array4 = new Array(PleaseSelect,'[ArrayFabric1]Single Swag','[ArrayFabric2]Two Swags')

This way I can populate each select box depending on the option selected and have numerous options depending on each other.

My question now is: I want to be able to populate more than one select box at once. I can do this:

<select name="productSwags" onChange="PopulateOptions(this, 'productFabric');PopulateOptions(this, 'productTrim')">

but doing so will populate both select boxes with the same options. What I am trying to do is populate each select box with a its own set of options.

I want to set up the arrays in a certain way that each populateOptions will
only put in the options that belong to it.

Can somebody help me do this?

This is the page I am working on so you can see what I mean:

Customize your own swag valance

Thank you

Judy

[acoder]

If you use the id, you can refer to the other select boxes to populate them too, e.g. document.getElementById(id) would give you a reference to the element.

[judyw]

Can you please explain me where to put this in with my example.

Sorry I am not very good in javascript so I don't know how to do it without an example and then I can copy and paste it on the other places.

Thanks

Judy

[acoder]

You say you can do this:

<select name="productSwags" onChange="PopulateOptions(this, 'productFabric');PopulateOptions(this, 'productTrim')">

but it populates both with the same options. Having had a look at the code for PopulateOptions, it seems that the code is a bit inflexible, but we can work around that.

You need to pass a reference to the drop-down list you want to populate from, so use document.getElementById("productSwags") to refer to the "productSwags" drop-down, but only after giving it an id:

<select name="productSwags" id="productSwags">

[judyw]

This is where the populate options pulls the options from:

var Array4 = new Array(PleaseSelect,'[ArrayFabric1]Single Swag','[ArrayFabric2]Two Swags')

The populate options only specifies which select box to put the list in. If I would put in ArrayTrim1 in the above brackets both productFabric and productTrim will get populated with the trim options(or whatever options I put in.)

So how can I add ArrayFabric1 and ArrayTrim1 to the above code?

[acoder]

The way PopulateOptions works is that it takes the drop-down element and gets the array name from the selected, so you can only have one array at a time which is quite inflexible. It would have made more sense to keep things more flexible. You'll either have to change the function code or use something else.