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

User · Answer

So I changed it so that now it executes after a 300 miliseconds using setTimeout. Seems to be working now.

I have run into this many times when loading data from an Ajax call. I too use .NET, and it takes time to get adjusted to the clientId when using the jQuery selector. To correct the problem that you're having and to avoid having to add a setTimeout property, you can simply put "async: false" in the Ajax call, and it will give the DOM enough time to have the objects back that you are adding to the select. A small sample below:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

User · Answer

With hidden field you need to use like this        statusDDL   val 2        statusDDL   change      or       statusDDL   val 2  change

User · Answer

How are you loading the values into the drop down list or determining which value to select  If you are doing this using Ajax  then the reason you need the delay before the selection occurs could be because the values were not loaded in at the time that the line in question executed   This would also explain why it worked when you put an alert statement on the line before setting the status since the alert action would give enough of a delay for the data to load   If you are using one of jQuery s Ajax methods  you can specify a callback function and then put      statusDDL   val 2   into your callback function   This would be a more reliable way of handling the issue since you could be sure that the method executed when the data was ready  even if it took longer than 300 nbsp ms

User · Answer

lt asp DropDownList ID  DropUserType  ClientIDMode  Static  runat  server  gt        lt asp ListItem Value  1  Text  aaa  gt  lt  asp ListItem gt        lt asp ListItem Value  2  Text  bbb  gt  lt  asp ListItem gt   lt  asp DropDownList gt    ClientIDMode  Static       DropUserType   val  1

User · Answer

In my case I was able to get it working using the  attr   method        statusDDL   attr  selected

User · Answer

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

User · Answer

How are you loading the values into the drop down list or determining which value to select  If you are doing this using Ajax  then the reason you need the delay before the selection occurs could be because the values were not loaded in at the time that the line in question executed   This would also explain why it worked when you put an alert statement on the line before setting the status since the alert action would give enough of a delay for the data to load   If you are using one of jQuery s Ajax methods  you can specify a callback function and then put      statusDDL   val 2   into your callback function   This would be a more reliable way of handling the issue since you could be sure that the method executed when the data was ready  even if it took longer than 300 nbsp ms

User · Answer

lt asp DropDownList id  MyDropDown  runat  server    gt    Use    select name   MyDropDown     val

User · Answer

In my case I was able to get it working using the  attr   method        statusDDL   attr  selected

User · Answer

I use an extend function to get client ids  like so     extend       clientID  function id            return     id       id                      Then you can call ASP NET controls in jQuery like this     clientID   statusDDL

User · Answer

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

User · Answer

Pure JS For modern browsers using CSS selectors is not a problem for pure JS document querySelector    statusDDL   value   2    x000D   x000D  function change       document querySelector    statusDDL   value   2    x000D   lt select class   statusDDL  gt     lt option value  1  selected gt A lt  option gt     lt option value  2  gt B lt  option gt     lt option value  3  gt C lt  option gt   lt  select gt    lt button onclick  change    gt Change lt  button gt  x000D   x000D   x000D

User · Answer

I use an extend function to get client ids  like so     extend       clientID  function id            return     id       id                      Then you can call ASP NET controls in jQuery like this     clientID   statusDDL

User · Answer

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     quot  dropDownList quot   prop  quot selectedIndex quot     To set the selected index of a drop down list  you would use this     quot  dropDownList quot   prop  quot selectedIndex quot   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   lt select id  quot listOfMonths quot  gt     lt option id  quot JAN quot  gt January lt  option gt     lt option id  quot FEB quot  gt February lt  option gt     lt option id  quot MAR quot  gt March lt  option gt   lt  select gt   You could add a  quot Previous Month quot  and  quot Next Month quot  button  which looks at the currently selected drop down list item  and changes it to the previous next month   lt button id  quot btnPrevMonth quot  title  quot Prev quot  onclick  quot btnPrevMonth Click   return false  quot    gt   lt button id  quot btnNextMonth quot  title  quot Next quot  onclick  quot btnNextMonth Click   return false  quot    gt   And here s the JavaScript which these buttons would run  function btnPrevMonth Click         var selectedIndex      quot  listOfMonths quot   prop  quot selectedIndex quot        if  selectedIndex  gt  0               quot  listOfMonths quot   prop  quot selectedIndex quot   selectedIndex - 1           function btnNextMonth Click             Note   the JQuery  quot prop quot  function requires JQuery v1 6 or later     var selectedIndex      quot  listOfMonths quot   prop  quot selectedIndex quot        var itemsInDropDownList      quot  listOfMonths option quot   length           If we re not already selecting the last item in the drop down list  then increment the SelectedIndex     if  selectedIndex  lt   itemsInDropDownList - 1                quot  listOfMonths quot   prop  quot selectedIndex quot   selectedIndex   1            My site is also useful for showing how to populate a drop down list with JSON data  http   mikesknowledgebase com pages Services WebServices-Page8 htm

User · Answer

Pure JS For modern browsers using CSS selectors is not a problem for pure JS document querySelector    statusDDL   value   2    x000D   x000D  function change       document querySelector    statusDDL   value   2    x000D   lt select class   statusDDL  gt     lt option value  1  selected gt A lt  option gt     lt option value  2  gt B lt  option gt     lt option value  3  gt C lt  option gt   lt  select gt    lt button onclick  change    gt Change lt  button gt  x000D   x000D   x000D

User · Answer

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        lt    statusDDL ClientID   gt    val  2      ASP NET will render the control ID correctly inside the jQuery

User · Answer

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

User · Answer

Just try with        statusDDL   val  2      and not with        statusDDL   val 2

User · Answer

Just try with        statusDDL   val  2      and not with        statusDDL   val 2

User · Answer

With hidden field you need to use like this        statusDDL   val 2        statusDDL   change      or       statusDDL   val 2  change

User · Answer

Just try with        statusDDL   val  2      and not with        statusDDL   val 2

User · Answer

How are you loading the values into the drop down list or determining which value to select  If you are doing this using Ajax  then the reason you need the delay before the selection occurs could be because the values were not loaded in at the time that the line in question executed   This would also explain why it worked when you put an alert statement on the line before setting the status since the alert action would give enough of a delay for the data to load   If you are using one of jQuery s Ajax methods  you can specify a callback function and then put      statusDDL   val 2   into your callback function   This would be a more reliable way of handling the issue since you could be sure that the method executed when the data was ready  even if it took longer than 300 nbsp ms

User · Answer

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

User · Answer

lt asp DropDownList id  MyDropDown  runat  server    gt    Use    select name   MyDropDown     val

User · Answer

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        lt    statusDDL ClientID   gt    val  2      ASP NET will render the control ID correctly inside the jQuery

User · Answer

Another option is to set the control param ClientID  Static  in  net and then you can access the object in JQuery by the ID you set

User · Answer

Just a note - I ve been using wildcard selectors in jQuery to grab items that are obfuscated by ASP NET Client IDs - this might help you too   lt asp DropDownList id  quot MyDropDown quot  runat  quot server quot    gt      quot  id     MyDropDown   quot   append  quot  lt option value  -1  gt  amp nbsp  lt  option gt  quot      etc  Note the id  wildcard- this will find your element even if the name is  quot ctl00 ctl00 ContentPlaceHolder1 ContentPlaceHolder1 MyDropDown quot

User · Answer

Just try with        statusDDL   val  2      and not with        statusDDL   val 2

User · Answer

If we have a dropdown with a title of  Data Classification     lt select title  Data Classification  gt       lt option value  Top Secret  gt Top Secret lt  option gt       lt option value  Secret  gt Secret lt  option gt       lt option value  Confidential  gt Confidential lt  option gt   lt  select gt    We can get it into a variable   var dataClsField      select title  Data Classification        Then put into another variable the value we want the dropdown to have   var myValue    Top Secret       this would have been  2  in your example   Then we can use the field we put into dataClsField  do a find for myValue and make it selected using  prop     dataClsField find  option value     myValue        prop  selected    selected      Or  you could just use  val    but your selector of   can only be used if it matches a class on the dropdown  and you should use quotes on the value inside the parenthesis  or just use the variable we set earlier   dataClsField val myValue

User · Answer

So I changed it so that now it executes after a 300 miliseconds using setTimeout. Seems to be working now.

I have run into this many times when loading data from an Ajax call. I too use .NET, and it takes time to get adjusted to the clientId when using the jQuery selector. To correct the problem that you're having and to avoid having to add a setTimeout property, you can simply put "async: false" in the Ajax call, and it will give the DOM enough time to have the objects back that you are adding to the select. A small sample below:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

User · Answer

How are you loading the values into the drop down list or determining which value to select  If you are doing this using Ajax  then the reason you need the delay before the selection occurs could be because the values were not loaded in at the time that the line in question executed   This would also explain why it worked when you put an alert statement on the line before setting the status since the alert action would give enough of a delay for the data to load   If you are using one of jQuery s Ajax methods  you can specify a callback function and then put      statusDDL   val 2   into your callback function   This would be a more reliable way of handling the issue since you could be sure that the method executed when the data was ready  even if it took longer than 300 nbsp ms

User · Answer

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

User · Answer

I know this is a old question and the above solutions works fine except in some cases   Like     lt select id  select selector  gt   lt option value  1  gt Item1 lt  option gt   lt option value  2  gt Item2 lt  option gt   lt option value  3  gt Item3 lt  option gt   lt option value  4  selected  selected  gt Item4 lt  option gt   lt option value  5  gt Item5 lt  option gt   lt  select gt    So Item 4 will show as  Selected  in the browser and now you want to change the value as 3 and show  Item3  as selected instead of Item4 So as per the above solutions if you use   jQuery   select selector   val 3     You will see that Item 3 as selected in browser But when you process the data either in php or asp   you will find the selected value as  4  The reason is that   your html will look like this    lt select id  select selector  gt   lt option value  1  gt Item1 lt  option gt   lt option value  2  gt Item2 lt  option gt   lt option value  3  selected  selected  gt Item3 lt  option gt   lt option value  4  selected  selected  gt Item4 lt  option gt   lt option value  5  gt Item5 lt  option gt   lt  select gt    and it gets the last value as  4  in sever side language   SO MY FINAL SOLUTION ON THIS REGARD  newselectedIndex   3  jQuery   select selector option selected   removeAttr  selected    jQuery   select selector option value    newselectedIndex        attr  selected    selected        EDIT  Add single quote around   newselectedIndex   so that the same functionality can be used for non-numerical values   So what I do is actually  removed the selected attribute and then make the new one as selected   I would appreciate comments on this from senior programmers like  strager    y0mbo    ISIK and others

User · Answer

Another option is to set the control param ClientID  Static  in  net and then you can access the object in JQuery by the ID you set

User · Answer

lt asp DropDownList ID  DropUserType  ClientIDMode  Static  runat  server  gt        lt asp ListItem Value  1  Text  aaa  gt  lt  asp ListItem gt        lt asp ListItem Value  2  Text  bbb  gt  lt  asp ListItem gt   lt  asp DropDownList gt    ClientIDMode  Static       DropUserType   val  1

User · Answer

Just a note - I ve been using wildcard selectors in jQuery to grab items that are obfuscated by ASP NET Client IDs - this might help you too   lt asp DropDownList id  quot MyDropDown quot  runat  quot server quot    gt      quot  id     MyDropDown   quot   append  quot  lt option value  -1  gt  amp nbsp  lt  option gt  quot      etc  Note the id  wildcard- this will find your element even if the name is  quot ctl00 ctl00 ContentPlaceHolder1 ContentPlaceHolder1 MyDropDown quot

User · Answer

I know this is a old question and the above solutions works fine except in some cases   Like     lt select id  select selector  gt   lt option value  1  gt Item1 lt  option gt   lt option value  2  gt Item2 lt  option gt   lt option value  3  gt Item3 lt  option gt   lt option value  4  selected  selected  gt Item4 lt  option gt   lt option value  5  gt Item5 lt  option gt   lt  select gt    So Item 4 will show as  Selected  in the browser and now you want to change the value as 3 and show  Item3  as selected instead of Item4 So as per the above solutions if you use   jQuery   select selector   val 3     You will see that Item 3 as selected in browser But when you process the data either in php or asp   you will find the selected value as  4  The reason is that   your html will look like this    lt select id  select selector  gt   lt option value  1  gt Item1 lt  option gt   lt option value  2  gt Item2 lt  option gt   lt option value  3  selected  selected  gt Item3 lt  option gt   lt option value  4  selected  selected  gt Item4 lt  option gt   lt option value  5  gt Item5 lt  option gt   lt  select gt    and it gets the last value as  4  in sever side language   SO MY FINAL SOLUTION ON THIS REGARD  newselectedIndex   3  jQuery   select selector option selected   removeAttr  selected    jQuery   select selector option value    newselectedIndex        attr  selected    selected        EDIT  Add single quote around   newselectedIndex   so that the same functionality can be used for non-numerical values   So what I do is actually  removed the selected attribute and then make the new one as selected   I would appreciate comments on this from senior programmers like  strager    y0mbo    ISIK and others

User · Answer

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     quot  dropDownList quot   prop  quot selectedIndex quot     To set the selected index of a drop down list  you would use this     quot  dropDownList quot   prop  quot selectedIndex quot   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   lt select id  quot listOfMonths quot  gt     lt option id  quot JAN quot  gt January lt  option gt     lt option id  quot FEB quot  gt February lt  option gt     lt option id  quot MAR quot  gt March lt  option gt   lt  select gt   You could add a  quot Previous Month quot  and  quot Next Month quot  button  which looks at the currently selected drop down list item  and changes it to the previous next month   lt button id  quot btnPrevMonth quot  title  quot Prev quot  onclick  quot btnPrevMonth Click   return false  quot    gt   lt button id  quot btnNextMonth quot  title  quot Next quot  onclick  quot btnNextMonth Click   return false  quot    gt   And here s the JavaScript which these buttons would run  function btnPrevMonth Click         var selectedIndex      quot  listOfMonths quot   prop  quot selectedIndex quot        if  selectedIndex  gt  0               quot  listOfMonths quot   prop  quot selectedIndex quot   selectedIndex - 1           function btnNextMonth Click             Note   the JQuery  quot prop quot  function requires JQuery v1 6 or later     var selectedIndex      quot  listOfMonths quot   prop  quot selectedIndex quot        var itemsInDropDownList      quot  listOfMonths option quot   length           If we re not already selecting the last item in the drop down list  then increment the SelectedIndex     if  selectedIndex  lt   itemsInDropDownList - 1                quot  listOfMonths quot   prop  quot selectedIndex quot   selectedIndex   1            My site is also useful for showing how to populate a drop down list with JSON data  http   mikesknowledgebase com pages Services WebServices-Page8 htm

User · Answer

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

User · Answer

If we have a dropdown with a title of  Data Classification     lt select title  Data Classification  gt       lt option value  Top Secret  gt Top Secret lt  option gt       lt option value  Secret  gt Secret lt  option gt       lt option value  Confidential  gt Confidential lt  option gt   lt  select gt    We can get it into a variable   var dataClsField      select title  Data Classification        Then put into another variable the value we want the dropdown to have   var myValue    Top Secret       this would have been  2  in your example   Then we can use the field we put into dataClsField  do a find for myValue and make it selected using  prop     dataClsField find  option value     myValue        prop  selected    selected      Or  you could just use  val    but your selector of   can only be used if it matches a class on the dropdown  and you should use quotes on the value inside the parenthesis  or just use the variable we set earlier   dataClsField val myValue

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

Examples related to javascript

Examples related to jquery

Examples related to asp.net

Examples related to html-select