Execute Javascript function from html select

Question

I have a simple html select tag with some options attached:

<select>
<option>school a</option>
<option>school b</option>
<option>school c</option>
</select>

I'd like to attach some simple event handlers to the options the same way I would to say... a link:

<option onclick="scheduleA();">school a</option>

Do I need to construct a separate Javascript function to deal with event handling in this situation or is there some quick html that will accomplish this task?

Answer 1

You would be better off assigning onChange="schedule(this.value); on the <select>. Partly because it actually works, partly to avoid redundant code if the same option is selected twice, partly because fewer event handlers is always better.

Answer 2

Use an onchange event on the select

<select onchange="scheduleA.call(this, event)">

Then in your handler...

function scheduleA(event) {
    alert(this.options[this.selectedIndex].text);
}

DEMO: http://jsfiddle.net/hYY6X/