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

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

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.

Solutions/Answers:

Solution 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');

Solution 2:

With hidden field you need to use like this:

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

or

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

Solution 3:

Just an FYI, you don’t need to use CSS classes to accomplish this.

You can write the following line of code to get the correct control name on the client:

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET will render the control ID correctly inside the jQuery.

Solution 4:

Just try with

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

and not with

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

Solution 5:

These solutions seem to assume that each item in your drop down lists has a val() value relating to their position in the drop down list.

Things are a little more complicated if this isn’t the case.

To read the selected index of a drop down list, you would use this:

$("#dropDownList").prop("selectedIndex");

To set the selected index of a drop down list, you would use this:

$("#dropDownList").prop("selectedIndex", 1);

Note that the prop() feature requires JQuery v1.6 or later.

Let’s see how you would use these two functions.

Supposing you had a drop down list of month names.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

You could add a “Previous Month” and “Next Month” button, which looks at the currently selected drop down list item, and changes it to the previous/next month:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

And here’s the JavaScript which these buttons would run:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

The following site is also useful, for showing how to populate a drop down list with JSON data:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

Phew !!

Hope this helps.

Solution 6:

After looking at some solutions, this worked for me.

I have one drop-down list with some values and I want to select the same value from another drop-down list… So first I put in a variable the selectIndex of my first drop-down.

var indiceDatos = $('#myidddl')[0].selectedIndex;

Then, I select that index on my second drop-down list.

$('#myidddl2')[0].selectedIndex = indiceDatos;

Note:

I guess this is the shortest, reliable, general and elegant solution.

Because in my case, I’m using selected option’s data attribute instead of value attribute.
So if you do not have unique value for each option, above method is the shortest and sweet!!