IT and communication: Web authoring and surfing: Forms:

Multi-dimensional dropdown menus

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.)

Read document part

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 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:

Read document part

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://www.cs.tut.fi/cgi-bin/run/~jkorpela/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.