How can I set the value of a DropDownList using jQuery?

As the question says, how do I set the value of a DropDownList control using jQuery?



just make sure the value in the options tags matches the value in the val method.

If you working with index you can set the selected index directly with .attr():

$("#mydropdownlist").attr('selectedIndex', 0);

This will set it to the first value in the droplist.

Edit: The way I did it above used to work. But it seems like it doesn't any longer.

But as Han so pleasantly points out in the comments, the correct way to do it is:

$("#mydropdownlist").get(0).selectedIndex = index_here;

As suggested by @Nick Berardi, if your changed value is not reflected on the UI front end, try:


Try this very simple approach:

/*make sure that value is included in the options value of the dropdownlist 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)

$('#mycontrolId').val(myvalue).attr("selected", "selected");

If your dropdown is Asp.Net drop down then below code will work fine,


But if your DropDown is HTML drop down then this code will work.


Best answer for the question:







jQuery("#availability option:selected").val();

Or to get the text of the option, use text():

jQuery("#availability option:selected").text();

More Info:

    alert($('#combo :selected').text());
<script src=""></script>
<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
<input id="button1" type="button" value="Click!" />

There are many ways to do it. here are some of them:



$('select').prop('selectedIndex', 3);

In this article there are different ways to Select drop down value using Jquery.

I think this may help:

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));

If you do this way, you add an element with no text. So, when you click de combo, it doesn't apear, but the value -1 you added a later select with $(".autoCompleteDepartment").val(-1); let you control if the combo has a valid value.

Hope it helps anybody.

Sorry for my english.

Here is a function made to quickly set the selected option:

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);

Call this function with argument element id and selected value; like this:

SetSelected('selectID','some option');

It is useful when there are lot of select options to be set.

In case when you load all <options ....></options> by Ajax call Follow these step to do this.

1). Create a separate method for set value of drop-down For Ex:

function set_ip_base_country(countryCode)

2). Call this method when ajax call success all html append task complete

For Ex:

success: function (doc) {
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')

Set drop-down selected value and update changes

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

Here we first set value from Model and than updated it on chosen

//Html Format of the dropdown list.

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// If you want to change the selected Item to test2 using javascript. Try this one. // set the next option u want to select

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');

Using the highlighted/checked answer above worked for me... here's a little insight. I cheated a little on getting the URL, but basically I'm defining the URL in the Javascript, and then setting it via the jquery answer from above:

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="">Task 1</option>
    <option value="">Task 2</option>
    <option value="">Task 3</option>
    <option value="">Task 4</option>
    <option value="">Task 5</option>
    <option value="">Task 6</option>
    <option value="">Task 7</option>
    <option value="">Task 8</option>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();

Need Your Help

Postgres unique constraint vs index

sql postgresql unique

As I can understand documentation the following definitions are equivalent:

How to change default port 8080 in WildFly

jboss wildfly wildfly-8

I just started JAVA EE development with WildFly 8.2. My first problem is how to change the default port 8080 to something else?