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>

Maybe this post can help you out: http://stackoverflow.com/q/196684/508702 — Bas Slagter, Dec 20 '11 at 08:26

Nicola Peluchetti · Answer 1 · 2011-12-20T08:51:27.890

21

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

edited Dec 20 '11 at 08:51

answered Dec 20 '11 at 08:37

Nicola Peluchetti

76,206
31
145
192

Also, I've edited my post and referred to this answer because it's so sexy – Tim S. Dec 20 '11 at 08:43
1

This works in the case of OP because the value is numeric. If like me you need this to work with string values, change to `$("div#selection select.select option[value='"+num+"']").prop("selected", true);` by adding in the single quotes around the `"+num+"`. – AntonChanning Nov 29 '16 at 11:33

Tim S. · Accepted Answer · 2013-09-26T07:14:10.460

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.

score 1 · Answer 3 · answered Dec 20 '11 at 08:52

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.

score 0 · Answer 4 · answered Dec 20 '11 at 08:30

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");    
        }
    });

score 0 · Answer 5 · answered Dec 20 '11 at 08:34

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");    
        }
    });
});

score 0 · Answer 6 · answered Dec 20 '11 at 08:44

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);    
      }
   });

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

6 Answers6

Linked