I'm not sure how you want to initially populate the list box, so I'll leave that up to you. In this example, I initially have the list box with no options. I left out the <script> tags and <html> tags, so use this as an example or place the code in its appropriate place.
function changeListBox(form_obj) {
form_obj.listbox.options.length = 0
if (form_obj.dropdown.options[form_obj.dropdown.selectedIndex].value == "1"
{
form_obj.options[0] = new Option("Text1","Value1"
form_obj.options[1] = new Option("Text1","Value1"
// AND SO ON ..
}
if (form_obj.dropdown.options[form_obj.dropdown.selectedIndex].value == "2"
{
form_obj.options[0] = new Option("Text2","Value2"
form_obj.options[1] = new Option("Text2","Value2"
// AND SO ON ..
}
}
<select name="dropdown" onChange="changListBox(this.form);">
<option value="1">Change List Box to List #1</option>
<option value="2">Change List Box to List #2</option>
</select>
<select multiple name="listbox">
</select>
That should be enough to get the wheels spinning in your head. However, if you have many options in the drop down list and many options in the list box for each of those categories, your JavaScript function could be pretty large. Since you mentioned having two listboxes and hiding one / showing another, I assumed that you're working with a relatively small amount of options.. The function above will dynamically change the contents of the list box without having to reload the page.
Let me know if this helps.
TW
