adding onclick event to html select option

Question

I added onclick event to my select tag like in the following code -

<option onclick="alert('Hello')">Say Hello</option>

but it does not work....

How can I set the option onclick event to fire ?

we don't have click event for option. use onchange event in select instead. — Arulraj
– Arulraj, Commented Jul 15, 2018 at 10:20
I couldn't comment because i don't have 50 reps. In my case i need onclick event for the option element because i need to focus on next text input on iOS Safari which only allows such thing by a user action (e.g user click). — Kia Faraji
– Kia Faraji, Commented Nov 23, 2022 at 10:25

Blue · Accepted Answer · 2018-07-15 10:16:25Z

13

Try it in the onchange handler:

function checkAlert(evt) {
  if (evt.target.value === "Say Hello") {
    alert('Hello');
  }
}

<select onchange="checkAlert(event)">
  <option>Test</option>
  <option>Say Hello</option>
</select>

answered Jul 15, 2018 at 10:16

Blue

23k7 gold badges69 silver badges102 bronze badges

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

Comments

mshouman · Accepted Answer · 2018-07-15 10:37:11Z

3

I prefer using Ids to add event listener to separate your code from html so I add an Id to your select tag with "my-select" for example and select this tag by its Id and add onchange event listener. This is the code:

<select id="my-select">
    <option value="1">Say Hello</option>
</select>
<script>
document.getElementById("my-select").addEventListener("change", printMsg);
function printMsg() {
    alert("Hello");
}
</script>

answered Jul 15, 2018 at 10:37

mshouman

3842 silver badges12 bronze badges

Comments

Eden Reich · Accepted Answer · 2018-07-15 10:21:56Z

0

you should use onchange event on the select element itself.

<select onchange="alert('hello')">
    <option value="0">Say Hello</option>
    <option value="1">Some other option</option>
</select>

hope that helps,

edited Jul 15, 2018 at 10:21

answered Jul 15, 2018 at 10:15

Eden Reich

3872 silver badges8 bronze badges

Collectives™ on Stack Overflow

adding onclick event to html select option

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related