Question

Is there a way add another dropdown form to this script?

http://javascript.internet.com/navigation/connected-comboxes.html

Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made…

Thanks in advance…

Answer 1

i was bored… try this. requires jquery

html:

<form>
<select id="s1">
<option>One</option>
<option value="two">Two</option>
<option>Three</option>
</select>

<select id="s2"></select>
<select id="s3"></select>
</form>

js:

// chain select boxes select1 and select2
//
// select1 should have options set already  choices is an object 
// literal with the level2 options for each value in select1.
//
// options can be either scalars or arrays of length 2, 
// in which case val[0] is the value and val[1] is the label text
//
// 

var chain = function(select1, select2, choices) {
    select1.change( function() {
        select2.find('option').remove();
        var options = ['<option>---</option>'];
        var value = $(this).val();
        if( value in choices ) {
            var subchoices = choices[value]
            for(var i = 0; i < subchoices.length; i++) {
                if( subchoices[i].constructor == Array) {
                    options.push('<option value="' 
                                 + subchoices[i][0] 
                                 + '">' 
                                 + subchoices[i][1] 
                                 + '</option>');
                }
                else {
                    options.push('<option>' 
                                 + subchoices[i] 
                                 + '</option>');
                }
            }
        }
        select2.append($(options.join('')));

    } );

    select1.change();
}

you can then define sub-lists

var sub1 = { One: ["One1", "One2", "One3"],
             two: [["two1", "Two1"], "Two2"]
       };
var sub2 = {two1: [4,5,6,[7, 8]]};

and activate like so:

$( function() {
    chain( $('#s1'), $('#s2'), sub1);
    chain( $('#s2'), $('#s3'), sub2);
});