Event handler on chosen option

Question

I need to handle alert event on chosen option.

  <select>
       <option value="1">A</option>
       <option value="2">B</option>
       <option value="3">C</option>
       <option value="3">D</option>
   </select>

For ex., if I choose "B" option, I want alert like "Chosen option is: B", etc...

Thank you!

What have you tried so far? See http://stackoverflow.com/questions/11828485/get-the-option-value-in-select-in-javascript for a similar question. — The Gav Lad, Sep 08 '16 at 13:00
there is no "alert event" in javascript - perhaps you want a `change` event on the `select` element — Jaromanda X, Sep 08 '16 at 13:00
This post is very similar: http://stackoverflow.com/questions/16015933/javascript-show-hidden-div-when-select-option-is-selected — The One and Only ChemistryBlob, Sep 08 '16 at 13:04

S.R · Answer 1 · 2016-09-08T13:13:18.470

0

Try It Once Its Working .

function myFunction() {
    var x = document.getElementById("mySelect").value;
   alert('You Selected'+' '+x);
}

<p>Select a any value in list.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="1">A
  <option value="2">B
  <option value="3">C
  <option value="4">D
</select>

edited Sep 08 '16 at 13:13

answered Sep 08 '16 at 13:03

S.R

84
6

`onchange="myFunction(this)"` using `function myFunction(sel) { alert('You Selected '+sel.value); }` is simpler - you do need to add value="..." to your options too – mplungjan Sep 08 '16 at 13:06

RPichioli · Answer 2 · 2016-09-08T13:31:02.540

0

Working example: (It's a jQuery example, using selectors and events basically)

// Wait for DOM load
$(document).ready(function() {
  
  // Binding change event to the <select>
  $('#my_select').change(function() {
    
    // Saving the HTML corresponding to the value selected
    $selected = $('#my_select option:selected').text();;
    // Debugging actual selection DOM-node on console
    console.log($('#my_select option:selected'));
    // Showing the message
    alert("Chosen option is: " + $selected);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- I have set an ID to identify you select -->
<select id="my_select">
   <option value="1">A</option>
   <option value="2">B</option>
   <option value="3">C</option>
   <option value="3">D</option>
</select>

Some official jQuery's documentation links:

http://api.jquery.com/category/events/

http://api.jquery.com/category/selectors/

edited Sep 08 '16 at 13:31

answered Sep 08 '16 at 13:19

RPichioli

3,245
2
25
29

The question was not tagged jQuery. – mplungjan Sep 08 '16 at 13:33
Also do not look for the select again: `var selected = $(this).find('option:selected').text();` – mplungjan Sep 08 '16 at 13:35
OK, working on that. My fault.. – RPichioli Sep 08 '16 at 13:35
This has both: http://stackoverflow.com/questions/15964561/event-handling-when-option-is-selected-from-dropdown-menu – mplungjan Sep 08 '16 at 13:38

Event handler on chosen option

2 Answers2