Select box to trigger a function

[tryin_to_learn]

I'm wanting to use the various options in this select box:

<form action="" name="deleteClients">	
		<select name="selectTherapist" id="selectTherapist">
			<option selected="selected">All Therapists</option>
			<option>Paul C. McNair, M.D.</option>
			<option>June Gray, MSW</option>		
			<option>Susan Carter, LPC</option>
			<option>Derek J. Smith, Ph.D.</option>
		</select>
</form>

to call this function:

function showHide(elementID, show)
{
	var el = document.getElementById(elementID);

	if(show)
	{
		el.style.display = '';
	}
	else
	{
		el.style.display = 'none';
	}

	return false;
}

For example, for radio buttons, I've been writing it something like this and it works fine. How can I translate this into the select box options?

<fieldset id="deleteClientFieldset" style="display: none;">
<legend><span class="brownPopupLabels">Delete Client(s) of</span></legend>
	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deleteAllClients', 1); showHide('deletePaulsClients', 0); showHide('deleteJunesClients', 0); showHide('deleteSusansClients', 0); showHide('deleteDereksClients', 0);" />All Therapists
			
	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deletePaulsClients', 1); showHide('deleteAllClients', 0); showHide('deleteJunesClients', 0); showHide('deleteSusansClients', 0); showHide('deleteDereksClients', 0);" />Paul 
			
	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deleteJunesClients', 1); showHide('deleteAllClients', 0); showHide('deletePaulsClients', 0); showHide('deleteSusansClients', 0); showHide('deleteDereksClients', 0);" />June 
			
	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deleteSusansClients', 1); showHide('deleteAllClients', 0); showHide('deletePaulsClients', 0); showHide('deleteJunesClients', 0); showHide('deleteDereksClients', 0);" />Susan 
			
	<input type="radio" name="archiveBy" value="client" onclick="javascript:showHide('deleteClientFieldset', 1); showHide('deleteDereksClients', 1); showHide('deleteAllClients', 0); showHide('deletePaulsClients', 0); showHide('deleteJunesClients', 0); showHide('deleteSusansClients', 0);" />Derek 
		
        <fieldset id="deleteAllClients" style="display: none;">
	<legend><span class="brownPopupLabels">All Therapists</span></legend>
				These are All clients.
	</fieldset>
			
	<fieldset id="deletePaulsClients" style="display: none;">
	<legend><span class="brownPopupLabels">Paul C. McNair, M.D.</span></legend>
				These are Paul's clients.
	</fieldset>
			
	<fieldset id="deleteJunesClients" style="display: none;">
	<legend><span class="brownPopupLabels">June Gray, MSW</span></legend>
				These are June's clients.
	</fieldset>
			
	<fieldset id="deleteSusansClients" style="display: none;">
	<legend><span class="brownPopupLabels">Susan Carter, LPC</span></legend>
				These are Susan's clients.
	</fieldset>
			
	<fieldset id="deleteDereksClients" style="display: none;">
	<legend><span class="brownPopupLabels">Derek J. Smith, Ph.D.</span></legend>
				These are Derek's clients.
	</fieldset>
		
</fieldset>

[tryin_to_learn]

I'm still struggling with this. At first I thought I would have to put the showHide function in the select box, like this:

<select id="selectTherapists" name="selectTherapists" onchange="showHide(param1, param2)"; >

Then the trick would be to pass it the parameters based on the value of the option selected. The problem is that each value actually needs to trigger the showHide function several times because each one shows two fieldset ids and hides several others.

When I got that far, I thought maybe I should write a whole new function that simply retrieved the value of the selected option, then set the various id display styles accordingly. So then the select box would look something like:

<select id="selectTherapists" name="selectTherapists" onchange="getOptionValues()"; >
		<option selected="selected">Choose a Therapist</option>
		<option value="all">All Therapists</option>
		<option value="paul">Paul C. McNair, M.D.</option>
		<option value="june">June Gray, MSW</option>		
		<option value="susan">Susan Carter, LPC</option>
		<option value="derek">Derek J. Smith, Ph.D.</option>
</select>

At that point, I wasn't sure if I should try to call the showHide() function from within the getOptionValues() function, or whether I should just set the various styles I need. I tried both and couldn't get either to work -- I think just because of syntax errors. I'm not terribly good at this.

In pseudo code, it would be something like this:

function getOptionValues() {
     if (value of the select box == "all") {
          show these ids: deleteClientFieldset, deleteAllClients
          and hide these ids: deletePaulsClients, deleteJunesClients, deleteSusansClients, deleteDereksClients
     }
     Then there'd be the next if statement or we could write the whole thing as a switch
}

Any takers?

[tryin_to_learn]

Or . . . is there a way to trigger the showHide function from the options themselves? Similar to how I did it with the radio buttons? That would sure be a whole heck of a lot simpler!

[Kravvitz]

IE doesn't support events on the option element.

I might use a helper function with a switch() statement to call the showHide function.

Why are you putting a semi-colon outside the value of the onchange attribute?

[tryin_to_learn]

Because I get hopelessly confused about semi-colons and quotes. So is the correct syntax onchange="getOptionValues();"

Thanks for the clarification about IE and option events.

[Kravvitz]

You're welcome

Yes, that's correct syntax, though, in that case, the semi-colon is optional.

It's best to avoid using inline event handlers though.
The Behavior Layer
Separating behavior and structure
Behavioral Separation
Unobtrusive JavaScript
DOM Scripting - Sample chapter: Best Practices
Accessible DHTML