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
manner.
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
get there.
(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://jkorpela.fi/, 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
using the value attribute in option elements.
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 .html.
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.)
If you'd like to have the submit button to be used when JavaScript is enabled, too, so that redirection does not take place immediately upon making the second selection, that's possible:
Please peek at the HTML source to see how it is done,
and consult
Navigational
pulldown menus in HTML for explanations
on the
server-side scripting method,
the
JavaScript method, and
the combined method. See also
notes on the option
element
in
JavaScript and HTML: possibilities and caveats.
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
(http://jkorpela.fi/cgi-bin/combine.pl)
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.