HTML select box to download files

Just recently I wanted to have a simple HTML select element where the user should be able to click on a specific option to download a certain file. I came up with a solution that contains some JavaScript and straight forward HTML markup.

The HTML markup consists of a simple HTML select element that triggers a certain JavaScript function via the onChange hook. The JavaScript function in turn just sets the window.location to the given file and so the browser starts downloading.

<script type="text/javascript">
function download(d) {
        if (d == 'Select document') return;
        window.location = 'http://example.com' + d;
}
</script>
 
<select name="download" onChange="download(this.value)">
<option>Select document</option>
<option value="a_file.pdf">A PDF document</option>
<option value="another_file.pdf">Another PDF document</option>
</select>

This technique can be used to jump to any page you want, e.g. you may use a select box instead of a large menu on your page. It helps you to include information – e.g. a long list – in a page with the compact select dropdown box that can be placed almost everywhere without consuming much space.