jquery selection if option.value equal something,

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

Your code works well. Just update 'this' with $(this). If there are no any other select dropdowns you can omit 'div#selection select.' like below.

$(document).ready(function(){
    var num = 3;
    $("select option").each(function(){     
        if($(this).val()==num){
            $(this).attr("selected","selected");    
        }
    });
});

Answer 2

Your problem starts here

$("div#selection select.select option").each(function(){ if((this).val()==num){

change it to

$("div#selection select.select").each(function(){
if($(this).val()==num){

and all your problem solved. You might want to change the .each to .change if you are thinking of having the script triggered everytime the selection is changed.

Answer 3

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()

Answer 4

The first time where you refer to this it is not a jQuery object it is a DOM object and a DOM object doesn't have the val() method. You should either use this.value och $(this).val() try this:

$("div#selection select.select option").each(function(){
        if($(this).val()==num){
            $(this).attr("selected","selected");    
        }
    });

Answer 5

try below

    $("div#selection select.select").val(num);

if your select box is multiple select, you can try

    $("div#selection select.select option").each(function(){
      if($(this).val()==num){ 
        $(this).attr("selected", true);    
      }
   });

Answer 6

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.