Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org
#

Q1046 How can I link three drop down form fields together so that chaining options in one of the first two effects the contents of the second and/or third?

You are here: irt.org | FAQ | JavaScript | Form | 4 | Q1046 [ previous next ]

Try something like:

<html>
<head>
<script language="JavaScript"><!--
var whatForm, whatTo, whatText;

function reshow(number) {
    whatFrom = document.forms['formName' + number].elements['selectName' + number];
    number++;
    whatTo = document.forms['formName' + number].elements['selectName' + number];

    for (var i = whatTo.length;i > 0;i--)
        whatTo.options[0] = null;

    whatText = whatFrom.options[whatFrom.selectedIndex].text;

    showLink(number);

    whatTo.options[0].selected = true;

    if (number == 2)
        reshow(2);

    return false;
}

function load(number) {
    what = document.forms['formName' + number].elements['selectName' + number];
    window.location.href = what.options[what.selectedIndex].value;
    return false;
}

function showLink(number) {
    if (number == 2)
        showLink2()
    else if (number == 3)
        showLink3();
}

function showLink2() {
    if (whatText == 'Red') {
        opt('red/ball.htm','Red Ball');
        opt('red/hat.htm','Red Hat');
    }

    if (whatText == 'Green') {
        opt('green/grass.htm','Green Grass');
        opt('green/tree.htm','Green Tree');
    }

    if (whatText == 'Blue') {
        opt('blue/sky.htm','Blue Sky');
        opt('blue/car.htm','Blue Car');
    }
}


function showLink3(text) {
    if (whatText == 'Red Ball') {
        opt('red/ball/round.htm','Round Red Ball');
        opt('red/ball/flat.htm','Flat Red Ball');
    }
    if (whatText == 'Red Hat') {
        opt('red/hat/top.htm','Red Top Hat');
        opt('red/hat/flap.htm','Red Flap Cap');
    }

    if (whatText == 'Green Grass') {
        opt('green/grass/tall.htm','Tall Green Grass');
        opt('green/tree/cut.htm','Green Cut Grass');
    }

    if (whatText == 'Green Tree') {
        opt('green/tree/oak.htm','Green Oak Tree');
        opt('green/tree/elm.htm','Green Elm Tree');
    }

    if (whatText == 'Blue Sky') {
        opt('blue/sky/cloudy.htm','Cloudy Blue Sky');
        opt('blue/sky/clear.htm','Clear Blue Sky');
    }

    if (whatText == 'Blue Car') {
        opt('blue/car/sports.htm','Blue Sports Car');
        opt('blue/car/racing.htm','Blue Racing Car');
    }
}

function opt(href,text) {
    var optionName = new Option(text, href, false, false)
    var length = whatTo.length;
    whatTo.options[length] = optionName;
}
//--></script>
</head>

<body>
<center>

<form name="formName1" onSubmit="return load(1)">
<select name="selectName1" onChange="reshow(1)">
<option value="red.htm" selected>Red
<option value="green.htm">Green
<option value="blue.htm">Blue
</select>
<input type="submit" value="Go">
</form>

<form name="formName2" onSubmit="return load(2)">
<select name="selectName2" onChange="reshow(2)">
<option value="red/ball.htm" selected>Red Ball
<option value="red/hat.htm">Red Hat
</select>
<input type="submit" value="Go">
</form>

<form name="formName3" onSubmit="return load(3)">
<select name="selectName3">
<option value="red/ball/round.htm" selected>Round Red Ball
<option value="red/hat/flat.htm">Flat Red Hat
</select>
<input type="submit" value="Go">
</form>

</center>
</body>
</html>

The following was submitted by Derek Porter

Use DHTML databinding and tabular data control. Only problem is that only MS IExplorer supports this. Get a good book on DHTML, I am fuzzy on details, hope this helps.

The DHTML code:

<-- declare file handle --> <object id="hatch"
  classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
  border="0" width="0" height="0">
<param name="DataURL" value="cgi-bin/data/hatch.txt"> <-- file and path on server -->
<param name="UseHeader" value="True">
<param name="FieldDelim" value="|"> <-- coma is default, I use "|" -- >
</object>

<table>
<tr>
<td width="100"><B>Fly</b></td> <-- column headings -->
<td width="200"><b>Pattern</b></td>
<td width="100"><b>Size</b></td>
</tr></table>
<table datasrc="#hatch" border=2> <-- file handle -->
<tr>
<td width="100"><span DATAFLD="fly" dataformatas="html"></span></td> <-- where data goes -->
<td width="200"><span DATAFLD="pattern" dataformatas="html"></span></td>
<td width="100"><span DATAFLD="size" dataformatas="html"></span></td>
</tr>
</table>

The test file: first line is data format/not displayed, the next two are records using "|" as field delimiter.

fly|pattern|size
Ligh Cahill|Standard Dry<br>Parachute<br>Cahill Nymph|16-12
Tan Caddis|Tan ElkHair Caddis<br>Creme Caddis Pupa<br>Olive Caddis Pupa|16-12

Feedback on 'Q1046 How can I link three drop down form fields together so that chaining options in one of the first two effects the contents of the second and/or third?'

©2018 Martin Webb