onChange vs. onLoad?

[djslothario]

Hi all,

I currently have one drop-down menu that, when changed, populates another drop-down menu. It works well, but when I refresh the page, the second drop-down menu's contents disappear, while the first one's is still in place. It's kind of annoying. Is there a way to populate the second menu automatically, when the page is loaded?

Danny

[Razee Marikar]

Yes, by scripting the required code immediately after adding the drop down box, or using the onchange handler. There are other, more complex handlers too.

[djslothario]

Thanks. What would that sort of code look like?

[Razee Marikar]

Something like this:

<select name="ddb1" id="ddb1">
<option value="s1">Selection 1</option>
<option value="s2">Selection 2</option>
<option value="s3">Selection 3</option>
</select>
<select name="ddb2" id="ddb2">
</select>
<script>
function createOption(value, text)
{ var el = document.createElement("option");
el.setAttribute("value", value);
el.appendChild(document.createTextNode(text));
return el;
}
var select1Selected = document.getElementById("ddb1").selectedIndex;
var selectToModify = document.getElementById("ddb2");
switch(select1Selected)
{
 case 0:
 case 2:
   selectToModify.appendChild(createOption("n1", "value 1"));
   selectToModify.appendChild(createOption("n2", "value 2"));
   break;
 case 1:
   selectToModify.appendChild(createOption("n3", "value 3"));
}
</script>

The above example uses DOM methods to add options. You can also use JavaScript without DOM, which you can find here.