Dropdown -> dropdown -> dropdown -> div

Hallå

Jag försöker skapa tre dropdowner som skickar info till varandra i ordning. Den första ska ha tre val, när man valt något av dessa ska info skickas till nästa dropdown som fylls med nya val. Man ska alltså kunna "gå olika vägar" fram till den sista. Den sista dropdownen ska vid val visa en div. De andra dropdownerna får gärna vara disablade till dess att de har info i sig.

Har sett lösningar med två dropdowner, men inte tre. Får det inte att funka. Någon som kan hjälpa?

Tack.

Hej! Välkommen till webForum!

Här har du något att leka med:

<script type="text/javascript">

var dd2_options = new Array();
dd2_options[0] = new Array();
dd2_options[1] = new Array();
dd2_options[2] = new Array();

dd2_options[0][0] = new Option( "val 1:1", "värde 1" );
dd2_options[0][1] = new Option( "val 1:2", "värde 2" );
dd2_options[0][2] = new Option( "val 1:3", "värde 3" );
dd2_options[1][0] = new Option( "val 2:1", "värde 1" );
dd2_options[1][1] = new Option( "val 2:2", "värde 2" );
dd2_options[1][2] = new Option( "val 2:3", "värde 3" );
dd2_options[2][0] = new Option( "val 3:1", "värde 1" );
dd2_options[2][1] = new Option( "val 3:2", "värde 2" );
dd2_options[2][2] = new Option( "val 3:3", "värde 3" );

var dd3_options = new Array();
dd3_options[0] = new Array();
dd3_options[1] = new Array();
dd3_options[2] = new Array();

dd3_options[0][0] = new Option( "val 1:1", "värde 1" );
dd3_options[0][1] = new Option( "val 1:2", "värde 2" );
dd3_options[0][2] = new Option( "val 1:3", "värde 3" );
dd3_options[1][0] = new Option( "val 2:1", "värde 1" );
dd3_options[1][1] = new Option( "val 2:2", "värde 2" );
dd3_options[1][2] = new Option( "val 2:3", "värde 3" );
dd3_options[2][0] = new Option( "val 3:1", "värde 1" );
dd3_options[2][1] = new Option( "val 3:2", "värde 2" );
dd3_options[2][2] = new Option( "val 3:3", "värde 3" );

function populate(cObj, nObj) {
    switch (nObj) {
        case "dd2":
        {
            selObj = cObj.form.elements[nObj];
            selObj.options.length = 0;

            var nSel = cObj.selectedIndex;
            for (var i = 0; i < dd2_options[nSel].length; ++i)
                selObj.options[i] = dd2_options[nSel][i];

            selObj.disabled = false;
        }
            break;

        case "dd3":
        {
            selObj = cObj.form.elements[nObj];
            selObj.options.length = 0;

            var nSel = cObj.selectedIndex;
            for (var i = 0; i < dd3_options[nSel].length; ++i)
                selObj.options[i] = dd3_options[nSel][i];

            selObj.disabled = false;
        }
            break;
    }
}

function showDiv(sObj) {
    nIndex = sObj.selectedIndex;
    cObj = sObj.options[ nIndex ];

    for (var i = 0; i < 3; ++i) {

        if ( i == nIndex ) document.getElementById( "div" + (i + 1) ).style.visibility = "visible";
        else document.getElementById( "div" + (i + 1) ).style.visibility = "hidden";

    }
}

</script>

<form>
    <select onchange="populate( this, 'dd2' )">
        <option>Val 1</option>
        <option>Val 2</option>
        <option>Val 3</option>
    </select>
    <select name="dd2" onchange="populate( this, 'dd3' )" disabled="disabled"></select>
    <select name="dd3" onchange="showDiv( this )" disabled="disabled"></select>
</form>

<div id="div1" style="visibility: hidden">div1</div>
<div id="div2" style="visibility: hidden">div2</div>
<div id="div3" style="visibility: hidden">div3</div>

:)