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?

Take a look at `onchange`. You cuold write one function with parameter. — Smamatti, Feb 12 '12 at 20:13
There your go my friend http://stackoverflow.com/questions/2000656/using-href-links-inside-option-tag — Alexander, Feb 12 '12 at 20:17

score 25 · Accepted Answer · answered Feb 12 '12 at 20:13

25

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.

answered Feb 12 '12 at 20:13

Niet the Dark Absol

311,322
76
447
566

@kjarsenal: If you're supporting older versions of IE, just be sure to give each `option` element its own `value` attribute. Older IE won't automatically substitute the text content of the `option` when you don't give it a value attribute. – Feb 12 '12 at 20:27
noted. those values will be generated dynamically by the framework. thank you. – kjarsenal Feb 12 '12 at 20:29

score 12 · Answer 2 · answered Feb 12 '12 at 20:13

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/

score 1 · Answer 3 · answered Feb 12 '12 at 20:18

1

use onchange instead

<select onchange="schedule(this.value)">
<option>school a</option>
<option>school b</option>
</select>

function schedule(selectedValue){
     ... do something with selectedValue
}

answered Feb 12 '12 at 20:18

dannix

235
1
13

1

That maybe, except the answer wasn't there when I loaded the page... If anything it re-enforces the fact it's a suitable solution. Moderators feel free to delete or whatever. I haven't been here that long but I really do get the impression there is a bit of an attitude I dislike from the community - hardly encouraging – dannix Feb 12 '12 at 20:31

score 0 · Answer 4 · edited Jul 08 '21 at 11:33

0

This could be easily done:

<span class="text-left" hidden>{{ fullNameExists(concern.user) }}</span>

It will invoke it. You can even hide it with hidden preventıng result being visible to users.

<client-only>
<span class="text-left" hidden>{{ fullNameExists(concern.user) }}</span>
</client-only>

edited Jul 08 '21 at 11:33

Dharman

26,923
21
73
125

answered Jun 10 '21 at 14:46

Bitfinicon

111
1
3
11

Execute Javascript function from html select

4 Answers4