jQuery on select box change acting strange

[slj90]

So I have a select / drop down box 

<select id="pos">
  <option id="topleft" value="topleft">Top Left</option>
  <option value="topcenter">Top Center</option>
  <option value="topright">Top Right</option>
  <option value="middleleft">Middle Left</option>
  <option value="middlecenter">Middle Center</option>
  <option value="middleright">Middle Right</option>
  <option value="bottomleft">Bottom Left</option>
  <option value="bottomcenter">Bottom Center</option>
  <option value="bottomright">Bottom Right</option>
</select>

When I use the following code it alerts the current value of the select box e.g "topleft" :
 

$('#pos').on('change', function() {
	
		alert( this.value ); 
		
});

But when I add an if function to only prompt the alert if the value is "topleft" it doesn't work:
 

$('#pos').on('change', function() {
	if(this.val() == "topleft"){
				alert( this.value ); 
		}
});

What is wrong?

Thanks

[Psycho]

What is the difference between the two manners in which you are referencing the value??

 

Hint, one of these things is not like the other:

 

 

$('#pos').on('change', function() {

    if(this.val() == "topleft"){

        alert( this.value ); 

    }

});

[slj90]

What is the difference between the two manners in which you are referencing the value??

 

Hint, one of these things is not like the other:

I'm not sure exactly what you mean but I have jjust changed to 

 

alert( this.val ); 

Which alerts "undefined", which is why it isn't working.

 

When the user selects the  "Top Left" option I want the function to run.

 

Thanks

[slj90]

I have managed to solved this, here is how.

$('#pos').on('change', function() {
var topleft = "topleft";
var option = $(this).find('option:selected').val();

	if(option == topleft){
		alert("Top Left")
	}

});