jquery selection if option.value equal something, mark a selected

Question

I have some question about jquery selection. In my case, how to match if the option.value equal something, mark a selected for it. Online code here

repeat code again. It caused Uncaught TypeError: Object #<HTMLOptionElement> has no method 'val', how to work as my hope? Thanks.

<script type="text/javascript">
$(document).ready(function(){
    var num = 3;
    $("div#selection select.select option").each(function(){
        if((this).val()==num){
            $(this).attr("selected","selected");    
        }
    });
});
</script>
<div id="selection">
    <label>Label1:</label>
    <select class="select">
        <option value="1">V1</option>
        <option value="2">V2</option>
        <option value="3">V3</option>
    </select>
    <label>Label2:</label>
    <select class="select">
        <option value="4">U1</option>
        <option value="5">U2</option>
        <option value="6">U3</option>
    </select>
</div>

Answer 1

You made a typo

Instead of (this).val() you should use $(this).val() in your if statement. this refers to a HTMLObject, $(this) would refer to a jQuery object. Because the .val() method is part of the jQuery framework, you can't use it on HTMLObjects. But I'm sure you knew that because it looks very much like a small typo.

This should work:

$(document).ready(function(){
    var num = 3;
    $("div#selection select.select option").each(function(){
        if($(this).val()==num){ // EDITED THIS LINE
            $(this).attr("selected","selected");    
        }
    });
});

---

Edit

You could optimize your loop by adding a return false; (break; for vanilla loops) when you have found your element so it doesn't keep looping elements while we're already "done".

However, you should look at Nicola Peluchetti's answer for a more efficient and cleaner code.

Answer 2

You have a typo and to set the option as selected you should use prop() and not attr(). in any case you could do

var num = 3;
$("div#selection select.select option[value="+num+"]").prop("selected", true);

fiddle here http://jsfiddle.net/YRBrp/

EDIT - the typo of course is what Tim S. pointed out, you should use $(this).val() and not (this).val()