This sketchy document illustrates "multi-dimensional dropdown menus" as briefly mentioned at the end of my document Navigational pulldown menus in HTML.
Let us assume that we wish to have a form with two
select elements so that the user can make
a choice in each of them and get a page which corresponds to
the combined choice. I have no real material to apply this idea to,
so I'll take an arbitrary example:
I have four different sets of documents (called "booklets"
in the sequel),
each divided into sections and subsections in a similar
The following form lets you select a "booklet", then a subsection
number.Depending on whether you have client-side scripting enabled
or not, you will then either get to the page corresponding to
your selection, or you have to use the submit button "Go!" to
(I use the
noscript element to hide the submit
button in cases where it is not needed, i.e. when client-side
scripting is enabled.)
Just in case you take this simple demonstration, a "proof of the concept", too seriously: All but the first "booklets" is in Finnish. And they are not structurally similar in any other way than being divided into sections and subsections as mentioned above. If you're interested in a useful application of the technique, you need to imagine (or write!) "booklets" which are structurally similar to each other, so that the visible options in the second menu could be meaningful strings like "Introduction", "Basic concepts", etc.
Basically, I have a "base URL", in my case
http://www.cs.tut.fi/~jkorpela/, which is a common
prefix for all the URLs of the documents (parts) involved.
Then I have different second parts,
corresponding to the options in the first menu; they need not
be identical to the visible options, since they are set
value attribute in
Next comes a separator (
/) and then a value taken from
the second menu (incidentally, the same as the visible option there,
but still set using
value). Finally, a filename suffix
is appended, in my case
The full URL is constructed from the components either by a
client-side script or, if such scripting is not supported by the
browser or the support has been disabled, by the server-side script.
In both cases, it is effectively just
concatenation of strings. (In a more complicated case, it could
use e.g. a two-dimensional array for
mapping pairs of selections to URLs.)
Please peek at the HTML source to see how it is done,
pulldown menus in HTML for explanations
server-side scripting method,
the combined method. See also
notes on the
The server-side script used is simple enough (written in Perl):
use CGI qw(:standard); print "Location: ".param('base').param('doc').'/'. param('n').param('tail')."\n\n"; exit;
Note: The particular installation of the script
I use in
the form above is just for illustration and testing. It is
not intended to be a public service, and can be
removed without notice.
So if you need such a script, install it on your server, or
find a public service for the purpose.