<tr>
    <td class="tdLabel"><label for="foo_bar" class="label">mylabel:</label></td>
    <td class="tdInput">
<select name="foo.bar" id="foo_bar" onmousedown="window.status='onmousedown';" onmouseup="window.status='onmouseup';" onmouseover="window.status='onmouseover';" onmousemove="window.status='onmousemove';" onmouseout="window.status='onmouseout';" onchange="foo_barRedirect(this.selectedIndex)">
    <option value="BE">Belgium</option>
    <option value="FR">France</option>
</select>
<br/>
<select name="region" id="region">
</select>
<script type="text/javascript">
    var foo_barGroup = new Array(2 + 0);
    for (var i = 0; i < (2 + 0); i++) {
    foo_barGroup[i] = [];
    }

    foo_barGroup[0][0] = new Option("Antwerp", "AN");
    foo_barGroup[0][1] = new Option("Gent", "GN");
    foo_barGroup[0][2] = new Option("Brugge", "BRG");
    foo_barGroup[1][0] = new Option("Paris", "PA");
    foo_barGroup[1][1] = new Option("Bordeaux", "BOR");

    var foo_barTemp = document.inputForm.region;
    foo_barRedirect(0);

    function foo_barRedirect(x) {
    	var selected = false;
        for (var m = foo_barTemp.options.length - 1; m >= 0; m--) {
            foo_barTemp.remove(m);
        }

        for (var i = 0; i < foo_barGroup[x].length; i++) {
            foo_barTemp.options[i] = new Option(foo_barGroup[x][i].text, foo_barGroup[x][i].value);
        }

        if ((foo_barTemp.options.length > 0)  && (! selected)) {
            foo_barTemp.options[0].selected = true;
        }
    }
</script>
    </td>
</tr>