Take current option in onChange() event

Question

What is the way to take the option that the user just clicked using "onChange" event? What I want to achieve is something like this:

<select name="my_select" onchange="checkOption(this)">
    <option value="first">1</option>
    <option value="second">2</option>
    <option value="third">3</option>
</select>

And the function:

function checkOption(e) {
    if ( jQuery(e).val() == 'second' )
        alert('You just clicked the second option!')
}

However I have no idea how to access the "this" represents the current option.

I know how to do this using the jquery change() event, however in my specific case this option isn't good. Any help will be appreciate!

Edit: This isn't duplication since the question there is about how to use jquery's change() event, which as I said is not what I am looking for.

Why not have a `$([name='my_select']).on('change', funciton(){ cur_val = $('option:selected', this).val(); })`. If you are using jQuery, try to avoid events on view. — Rajesh, Dec 20 '16 at 13:03
May it help! [fiddle](https://jsfiddle.net/31a0q06r/#&togetherjs=CvsLo7o8s9) — RonyLoud, Dec 20 '16 at 13:07
Possible duplicate of [jQuery get value of select onChange](http://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange) — Binit Ghetiya, Dec 20 '16 at 13:14
What does *However I have no idea how to access the "this" represents the current option.* mean? — Liam, Dec 20 '16 at 13:19

alpha-before-beta · Accepted Answer · 2016-12-20T13:34:04.280

4

If you are trying to avoid using jquery all together, you can try the following...

function checkOption(e) {
  if(e.options[e.selectedIndex].value === 'second')
        alert('You just clicked the second option!')
}

<select name="my_select" onchange="checkOption(this)">
    <option value="first">1</option>
    <option value="second">2</option>
    <option value="third">3</option>
</select>

edited Dec 20 '16 at 13:34

answered Dec 20 '16 at 13:18

alpha-before-beta

504
3
8

@Mackan - There is no point. Thanks for the heads up. I have cleaned up the answer and removed the lines that are not necessary. – alpha-before-beta Dec 20 '16 at 13:35

Binit Ghetiya · Answer 2 · 2016-12-20T13:29:27.600

0

You can use jquery's inbuilt onchange function something like below:

    <select name="my_select" class="my_select">
        <option value="first">1</option>
        <option value="second">2</option>
        <option value="third">3</option>
    </select>

Solution :

<script>
$(".my_select").change(function(){
  //every time you change value this will automatically calls
  if( this.value == 'second'){
    alert('You just clicked the second option!');
   }
});
</script>

edited Dec 20 '16 at 13:29

answered Dec 20 '16 at 13:11

Binit Ghetiya

1,919
2
21
31

`$("my_select")` won't bind to that HTML element. Thats looking for something like ``... – Liam Dec 20 '16 at 13:22
Fix the event too then: `change()` – Mackan Dec 20 '16 at 13:27

score 0 · Answer 3 · answered Dec 20 '16 at 13:21

Without JQuery you can use plain javascript like the below one to access the selected values

var e = document.getElementsByName("my_select")[0];
var selectedText = e.options[e.selectedIndex].value;
if ( selectedText == 'second' )
    alert('You just clicked the second option!')

score -1 · Answer 4 · answered Dec 20 '16 at 13:21

put an id in the html code and remove this keyword as:

<select id="id" name="my_select" onchange="checkOption()">
    <option value="first">1</option>
    <option value="second">2</option>
    <option value="third">3</option>
</select>

Then edit java script function as:

function checkOption() {
  var text = document.getElementById('id').value

    if ( text == 'second' )
        alert('You just clicked the second option!')
}

Hope it works!

Take current option in onChange() event

4 Answers4