Change the selected value of a drop-down list with jQuery

Question

I have a drop-down list with known values. What I'm trying to do is set the drop down list to a particular value that I know exists using jQuery. Using regular JavaScript, I would do something like:

ddl = document.getElementById("ID of element goes here"); ddl.value = 2; // 2 being the value I want to set it too. 

However, I need to do this with jQuery, because I'm using a CSS class for my selector (stupid ASP.NET client ids...).

Here are a few things I've tried:

$("._statusDDL").val(2); // Doesn't find 2 as a value. $("._statusDDL").children("option").val(2) // Also failed. 

How can I do it with jQuery?

---

Update

So as it turns out, I had it right the first time with:

$("._statusDDL").val(2); 

When I put an alert just above it works fine, but when I remove the alert and let it run at full speed, I get the error

Could not set the selected property. Invalid Index

I'm not sure if it's a bug with jQuery or Internet Explorer 6 (I'm guessing Internet Explorer 6), but it's terribly annoying.

Answer 1

jQuery's documentation states:

[jQuery.val] checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.

This behavior is in jQuery versions 1.2 and above.

You most likely want this:

$("._statusDDL").val('2'); 

Answer 2

With hidden field you need to use like this:

$("._statusDDL").val(2); $("._statusDDL").change(); 

or

$("._statusDDL").val(2).change();