Take the 2-minute tour ×

When I do the following comparison I get false although both val() and value visually display the same value:12

if ($(this).val() == txt.value)//returns false

When I alert both $(this).val() and txt.value I get 12. Is one of them a string and the other one an int? If so, which one's what?

share|improve this question
What kind of node does this refer to, and how are you defining txt? –  Matt Wilson Nov 27 '12 at 6:38
I have a select and a input text element. I compare the txt.value to each of the option values in the select. I get option value with $(this).val() and the value of the text box with txt.value. Note that this is performed inside $.each. –  Mike JM Nov 27 '12 at 6:42
can you run a simple demo on JSFiddle? –  Joseph the Dreamer Nov 27 '12 at 6:45
I tried to make a demo but I can't add anything to html pane in JSFiddle –  Mike JM Nov 27 '12 at 7:04
add comment

2 Answers

up vote 7 down vote accepted

Do a typeof to know the types of your values.

console.log(typeof $(this).val());
console.log(typeof txt.value);

jQuery could have altered the values when using .val() like trim whitespaces that should be present. To make sure, you can avoid using val().

The this in .each() as well as the second argument is the DOM element per iteration. You could get the value of the option directly:

$('select > option').each(function(i,el){
   //we should be getting small caps values

When using loose comparison (==), number 12 and string 12 should be the same. Even more surprising is that it's true even with the string having whitespaces around it. But with strict comparison (===), they shouldn't be:

"12"    ==  12  // true
" 12  " ==  12  // true; tested on Firefox 20 (nightly)
"12"    === 12  // false

At this point, we have weeded all thinkable gotchas. If none worked, both could be totally different values in the first place.

share|improve this answer
Useful info about loose comparison. thanks! –  MJQ Nov 27 '12 at 6:36
" 12" == 12 // true; tested on Chrome 23 –  Matt Wilson Nov 27 '12 at 6:42
Sorry guys, I've realized that the issue was not that the values did not match but because I was trying to return from the function if the condition was true. The condition is indeed true, but somehow the code continues after leaving the $.each loop. –  Mike JM Nov 27 '12 at 6:50
jQuery will not trim whitespace when calling .val(), but will replace /\r/g with '', or return a null value as '' –  Ian Nov 27 '12 at 7:27
add comment

I feel obliged to write so comments, which I find very useful, after taking so much time of the guys around here. So my problem was this:

('#mySelect option').each(function({
alert('Code still continues');

Although the result of the condition $(this).val() == txt.value was true the code after the each loop still executed. That's why I thought that the two values did not match. But if I put an alert inside this condition it showed up. It means something wrong was with the behavior of "return" inside the each loop. I've lately come to understand that although return stops the execution of the code after itself inside the each loop, it does not prevent the code from executing after the each block. Thus, to achieve the full function return inside the jquery each loop we seem to have to put a flag and decide if to return after the each according to this flag. The following code worked for me:

var shouldContinue = true;
('#mySelect option').each(function ()
    if ($(this).val() == txt.value) {
        shouldContinue = false;
        return (false);
if (!shouldContinue)

Note return(false) inside the iteration. What this means is, if the condition is true continue iterating no more and leave the loop.

share|improve this answer
add comment

Your Answer


