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
– Smamatti, Commented Feb 12, 2012 at 20:13
There your go my friend stackoverflow.com/questions/2000656/… — Alexander
– Alexander, Commented Feb 12, 2012 at 20:17

Niet the Dark Absol · Accepted Answer · 2012-02-12 20:13:07Z

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, 2012 at 20:13

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1106925 Over a year ago

@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.

kjarsenal Over a year ago

noted. those values will be generated dynamically by the framework. thank you.

user1106925 · Accepted Answer · 2012-02-12 20:13:55Z

14

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/

answered Feb 12, 2012 at 20:13

community wiki

user1106925

1 Comment

Aiiboo Over a year ago

Thanks a lot, that's was helpfully

dannix · Accepted Answer · 2012-02-12 20:18:26Z

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, 2012 at 20:18

dannix

2352 silver badges13 bronze badges

1 Comment

dannix Over a year ago

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

Dharman · Accepted Answer · 2021-07-08 11:33:28Z

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 8, 2021 at 11:33

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jun 10, 2021 at 14:46

Bitdom8

1,4821 gold badge14 silver badges24 bronze badges

Collectives™ on Stack Overflow

Execute Javascript function from html select

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Linked

Related