Populate one dropdown based on selection in another then redirect

Question

I'm trying to build a two tier drop down menu where the second drop down populates the second. I've found a lot of examples on the site but I want my menu to redirect to a page after the second menu is selected and can't figure that bit out.

I'm not that up to speed with JS so please bear with me.

The code below is an example from another post:

<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
    var colours = new Array('Black', 'White', 'Blue');
    var shapes = new Array('Square', 'Circle', 'Triangle');
    var names = new Array('John', 'David', 'Sarah');

    switch (ddl1.value) {
        case 'Colours':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(document.getElementById(ddl2), colours[i], colours[i]);
            }
            break;
        case 'Shapes':
            document.getElementById(ddl2).options.length = 0; 
        for (i = 0; i < colours.length; i++) {
            createOption(document.getElementById(ddl2), shapes[i], shapes[i]);
            }
            break;
        case 'Names':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < colours.length; i++) {
                createOption(document.getElementById(ddl2), names[i], names[i]);
            }
            break;
            default:
                document.getElementById(ddl2).options.length = 0;
            break;
    }

}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

Then call it

<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>
<select id="ddl2">
</select>

This all works fine, but I want the page to redirect to somewhere on the site after the person makes a selection in the second drop down.

Could anyone help with how to adapt the code to make that happen?

Thank you

score 0 · Answer 1 · edited May 23 '17 at 11:58

I want the page to redirect to somewhere on the site after the person makes a selection in the second drop down.

Hook on the change event of the second <select> element, and then submit the form from there:

<select id="ddl2" onChange="redirect(this)">
</select>

function redirect(select) {
    // The simplest way: call submit on the form element the select belongs to:
    select.form.submit();
}

But you could also change the target attribute of the form dynamically before submitting, or just navigate away.

Update: To make the submit work, you of course would need to give your selects some name attributes, like:

<form action="/router.php" method="GET">
    <select name="first" onchange="configureDropDownLists(this,'ddl2')">
        ...
    </select>
    <select name="second" id="ddl2" onChange="redirect(this)">
    </select>
</form>

Although your configureDropDownLists function may work, you might improve it by not using a switch statement, but an object literal, and just select the array of option values before executing the same thing if one was found in the object:

function configureDropDownLists(firstSelect, secondId) {
    var map = {
        "colours": ['Black', 'White', 'Blue'],
        "shapes": ['Square', 'Circle', 'Triangle'],
        "names": ['John', 'David', 'Sarah']
    };

    var value = firstSelect.value.toLowerCase();
    var optionsArr = map[value];

    var secondSelect = document.getElementById(secondId);
    secondSelect.options.length = 0; // remove all options
    if (optionsArr) {
         for (var i=0; i<optionsArr.length; i++) {
              createOption(secondSelect, optionsArr[i], optionsArr[i]);
         }
    }
}

Thanks. Will that also work if I wanted it redirect to a different page for each of the second drop down options i.e. if the second option selected is blue then it redirects to a page about blue things and if they selected white then it redirects to a page about white things? — David Lumley, Aug 05 '12 at 16:53
Yes, why not? In the example form I just added it would navigate to `/router.php?first=Colours&second=White` - you decide what that page contains. — Bergi, Aug 05 '12 at 17:03
Cool. Thanks, sorry missed your update. Thank you so much for your help, will have a play with it now. — David Lumley, Aug 05 '12 at 17:07

Populate one dropdown based on selection in another then redirect

1 Answers1

Linked