Link to home
Create AccountLog in
Avatar of dlcnet
dlcnetFlag for United Kingdom of Great Britain and Northern Ireland

asked on

dinamically update dropdown menus

Hi all!

I would like to know how can I make in javascript a dinamic update of dropdown menus. The ideea is the following: I have a first dropdown with 5 options, depending on option selected the 2nd dropdown menu should display only the options available for the given selection

ASKER CERTIFIED SOLUTION
Avatar of Bill-Hanson
Bill-Hanson
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of dlcnet

ASKER

@ Bill-Hanson

Thank you fro your quick reply!

I just have 2 question related to the code: My first drop-down is called Clasification and has the options: Active / NonActive / Printed / InTest and each of those have differnt options for the 2nd dropdown. Can you make it a bit clear where the 1rst drop-down options should be? In the getFieldValue function?
Sure.

Just create both items as regular select fields.  The options for both items can be specified using standard HTML.  The controller item will also include an onChange event handler to call our function that sets the dependent field's options.

Sample HTML For Controller Field:

<select name="Clasification" onchange="clasificationOnChange();">
<option value="Active">Active</option>
<option value="NonActive">NonActive</option>
<option value="Printed">Printed</option>
<option value="InTest">InTest</option>
</select>

Sample HTML For Dependent Field (I don't know the name of your 2nd field, so I'll use "DependentField"):

<select name="DependentField">
<option value="NONE">Please select a classification first!</option>
</select>

Using the sample HTML above, the clasificationOnChange function should look something like this (you'll need to change the field name and option values).

function clasificationOnChange{
        switch(getFieldValue("Clasification")){
                case "Active":
                        selectSetOptions(document.getElementById("DependentField"), new Array("Active - Option 1", "Active - Option 2", "Active - Option 3"));
                        break;
                case "NonActive":
                        selectSetOptions(document.getElementById("DependentField"), new Array("NonActive - Option 1", "NonActive - Option 2", "NonActive - Option 3"));
                        break;
                case "Printed":
                        selectSetOptions(document.getElementById("DependentField"), new Array("Printed - Option 1", "Printed - Option 2", "Printed - Option 3"));
                        break;
                case "InTest":
                        selectSetOptions(document.getElementById("DependentField"), new Array("InTest - Option 1", "InTest - Option 2", "InTest - Option 3"));
                        break;
                default:
                        break;
        };
};

Open in new window

Avatar of dlcnet

ASKER

fantastic respone A+++++