+<script type="text/javascript">
+ms_lists= <% to_json(\%islandlistdata) %>;
+function ms_Setarch(dd) {
+ debug('ms_SetArch '+dd+' arch='+arch);
+ var arch= document.getElementsByName('archipelago'+dd).item(0).value;
+ var got= ms_lists[arch];
+ if (got == undefined) return; // unknown arch ? hrm
+ debug('ms_SetArch '+dd+' arch='+arch+' got ok');
+ var select= document.getElementsByName('islandid'+dd).item(0);
+ select.innerHTML= got;
+ debug('ms_SetArch '+dd+' arch='+arch+' innerHTML set');
+}
+</script>
+
+% if (0) {
+ var nodes= select.getElementsByTagName('option');
+alert(ms_lists[dd]);
+ for (var i=0; i<nodes.length; i++) {
+ node= nodes.item(i);
+ value= node.getAttribute('value');
+ debug('ms_Setarch '+dd+' i='+i+' arch='+arch+' value='+value+'.');
+ if (value == 'none') {
+ if (arch == 'none') {
+ node.innerHTML= 'Select island ...';
+ } else {
+ }
+ } else {
+// alert('node i='+i+' arch='+arch+' value='+value+'.');
+ node.setAttribute('disabled', !(arch=='none' || value==arch));
+ }
+ }
+}
+% }
+
+% if (0) {
+<style type="text/css">
+table
+{
+table-layout: fixed;
+color: red;
+}
+pre
+{
+color:yellow;
+}
+</style>
+% }
+
+<table style="table-layout:fixed; width:90%;">
+
+<tr>
+% for my $dd (0..$a{Dropdowns}-1) {
+<td>
+<select name="archipelago<% $dd %>" onchange="ms_Setarch(<% $dd %>)">
+%# style="min-width:250px;"
+<option value="none">Whole ocean</option>
+<% $archlistdata %></select></td>
+% }
+</tr>
+