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: stackoverflow.com/q/196684/508702 — Bas Slagter
– Bas Slagter, Commented Dec 20, 2011 at 8:26

Nicola Peluchetti · Accepted Answer · 2011-12-20 08:51:27Z

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, 2011 at 8:51

answered Dec 20, 2011 at 8:37

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tim S. Over a year ago

Also, I've edited my post and referred to this answer because it's so sexy

ToniWidmo Over a year ago

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+".

Tim S. · Accepted Answer · 2013-09-26 07:14:10Z

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.

XepterX · Accepted Answer · 2011-12-20 08:52:30Z

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.

picknick · Accepted Answer · 2011-12-20 08:30:07Z

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

Umesh Patil · Accepted Answer · 2011-12-20 08:34:54Z

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

Robin Michael Poothurai · Accepted Answer · 2011-12-20 08:44:22Z

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

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related