Click on option event

Question

how do I handle events for option elements?

<select>
      <option value='option1'>Gateway 1</option>
      <option value='option2'>Gateway 2</option>
      <option value='option3'>Gateway 3</option>
 </select>

When an option element is clicked I want to display a little description for the element. Any ideas how to do that?

If anyone came here for the javascript solution (not jQuery), just add an event listener for the `change` event. — Sam Eaton, Jan 13 '16 at 15:42
For future reference, the 1st solution given in @niksvp's answer is actually the correct answer to this question. The jQuery answer given is specific to jQuery, whereas this question does not specify its use. — ManoDestra, Jun 03 '16 at 13:27

score 39 · Accepted Answer · answered Jan 12 '11 at 15:25

You're going to want to use jQuery's change event. I am displaying the text of your option as an alert, but you can display whatever you want based on your needs. (You can also, obviously, put it inside another part of the page...it doesn't need to be an alert.)

$('#myOptions').change(function() {
    var val = $("#myOptions option:selected").text();
    alert(val);
});

Also, note, that I added an ID to your select tag so that you can more easily handle events to it (I called it myOptions).

Example: http://jsfiddle.net/S9WQv/

niksvp · Answer 2 · 2016-06-03T12:25:38.303

23

As specified by JasCav using jQuery you can accomplish the same in javascript using

 <select onchange="alert(this.options[this.selectedIndex].text);">
      <option value='option1'>Gateway 1</option>
      <option value='option2'>Gateway 2</option>
      <option value='option3'>Gateway 3</option>
 </select>

Alternatively, onclick event of option, but note that it is not compatible on all browsers.

<select>
      <option value='option1' onclick="alert(this.value);" >Gateway 1</option>
      <option value='option2'>Gateway 2</option>
      <option value='option3'>Gateway 3</option>
</select>

edited Jun 03 '16 at 12:25

answered Jan 12 '11 at 15:22

niksvp

5,475
2
23
40

How is this a good solution? You can pick options with the keyboard, they will not fire anything click related. – Steven Lu Aug 25 '16 at 19:38
@StevenLu - Good note, in that case you can also bind `keypress` event. But here OP is facing difficulty for `click` event, which reflects in the answer. – niksvp Aug 26 '16 at 07:41
I suppose, but this is a case of the [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) and using click is somewhere on the spectrum between marginally wrong and totally wrong. My hunch is that using both click and keyboard handlers still won't allow the feature to work on any mobile platform. – Steven Lu Aug 26 '16 at 13:13

score 0 · Answer 3 · answered May 23 '21 at 07:58

You can write it as below mention using javascript.

document.getElementById("select").addEventListener('change', (event) => {
  console.log(event.target.value)
});

<select id="select">
      <option value='option1'>Gateway 1</option>
      <option value='option2'>Gateway 2</option>
      <option value='option3'>Gateway 3</option>
 </select>

Click on option event

3 Answers3

Linked

Related