html - Native JavaScript select onchange this.value undefined - Stack Overflow

I have a select tag that is generated by a php file that I would rather not have to change if it can be avoided. I also do not have the ability to use jQuery to solve my problem. So here is how I am trying to set an onchange event:

var d = document.getElementById('lang_choice');
d.onchange = function(){
    window.alert(this.value);
}

The pop up box just says undefined. I have checked the html and it has the value attributes set in the option tags. So I am guessing I misunderstand something about this system and some explanation would be great.

I have a select tag that is generated by a php file that I would rather not have to change if it can be avoided. I also do not have the ability to use jQuery to solve my problem. So here is how I am trying to set an onchange event:

var d = document.getElementById('lang_choice');
d.onchange = function(){
    window.alert(this.value);
}

The pop up box just says undefined. I have checked the html and it has the value attributes set in the option tags. So I am guessing I misunderstand something about this system and some explanation would be great.

• javascript
• html

Share Improve this question Follow asked Mar 4, 2014 at 18:47 user1994036user1994036 9

• 4 Works fine: jsfiddle/uEPbH . The fact that the alert is executing at all means that you've bound the event properly. So I have no idea what the problem could be unless you can reproduce it in a jsFiddle. – Ian Commented Mar 4, 2014 at 18:49
• 1 Which browser are you targeting? I have a feeling that this will work in modern browsers but fail in older ones (IE8, etc.) – Justin Niessner Commented Mar 4, 2014 at 18:54
• Weird, I thought this was right... how should I debug? Can I do something to determine what's going on inside the 'this' object? – user1994036 Commented Mar 4, 2014 at 18:54
• @JustinNiessner You are right. I just tested my fiddle on IE7 and it alerts nothing – Ian Commented Mar 4, 2014 at 18:57
• 1 @Ian - I would toss that into an answer. It would seem, at least to me, that the OP is using an older browser and isn't setting the value attribute of his <option>s. – Justin Niessner Commented Mar 4, 2014 at 19:07

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 2

var d = document.getElementById('lang_choice');
d.onchange = function(){
    window.alert(this.options[this.selectedIndex].value);
}

It works in older browser.

Although your method should work. There must be error elsewhere in your code. Check console.

Please make sure that you bind onchange event once DOM object available and make sure option tag value attribute.

<select id="lang_choice">
  <option value="en">English</option>
  <option value="es">Spanish</option>
</select>

This is helped for me.

For select:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

For radio/checkbox:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

IE has a bug(Not sure about versions), onchange will be fired before even value is set, so use like below

var d = document.getElementById('lang_choice');
d.onchange = function(){
   var th = this;
   setTimeout(function(){ window.alert( th.value ); }, 10);
}