How can I set the value of a DropDownList using jQuery

Question

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

User · Answer

Html Format of the dropdown list    lt select id  MyDropDownList  gt   lt option value test1 selected gt test1 lt  option gt   lt option value test2 gt test2 lt  option gt   lt option value test3 gt test3 lt  option gt   lt option value test4 gt test4 lt  option gt         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 gt                 MyDropDownList   html ChangeSelected

User · Answer

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

User · Answer

Try this very simple approach     make sure that value is included in the options value of the dropdownlist  e g     lt select gt  lt option value  CA  gt California lt  option gt  lt option value  AK  gt Alaska lt  option gt        lt  select gt           mycontrolId   val myvalue  attr  selected    selected

User · Answer

Try this very simple approach     make sure that value is included in the options value of the dropdownlist  e g     lt select gt  lt option value  CA  gt California lt  option gt  lt option value  AK  gt Alaska lt  option gt        lt  select gt           mycontrolId   val myvalue  attr  selected    selected

User · Answer

Html Format of the dropdown list    lt select id  MyDropDownList  gt   lt option value test1 selected gt test1 lt  option gt   lt option value test2 gt test2 lt  option gt   lt option value test3 gt test3 lt  option gt   lt option value test4 gt test4 lt  option gt         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 gt                 MyDropDownList   html ChangeSelected

User · Answer

In case when you load all  lt options      gt  lt  options gt  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          country   val countryCode       2   Call this method when ajax call success all html append task complete  For Ex   success  function  doc                          country   append   lt option style  color black   value      key      gt        value     lt  option gt      set ip base country ip base country

User · Answer

As suggested by  Nick Berardi  if your changed value is not reflected on the UI front end  try       mydropdownlist   val  thevalue   change

User · Answer

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

User · Answer

If your dropdown is Asp Net drop down then below code will work fine         lt   DropDownName ClientID  gt    0  selectedIndex 0    But if your DropDown is HTML drop down then this code will work        DropDownName   0  selectedIndex 0

User · Answer

I think this may help         getJSON   lt    Url Action  GetDepartment     gt                     coDepartment  paramDepartment                  function data                            autoCompleteDepartment   empty                            autoCompleteDepartment   append     lt option   gt    val -1                          each data  function                                 autoCompleteDepartment   append     lt option   gt    val this CodDepartment  text this DepartmentName                                                    autoCompleteDepartment   val -1                                                                              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

User · Answer

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    lt select id  select  onChange  window location href this value  gt       lt option value    gt Select a task  lt  option gt       lt option value  http   127 0 0 1 5000 choose form 1  gt Task 1 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 2  gt Task 2 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 3  gt Task 3 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 4  gt Task 4 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 5  gt Task 5 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 6  gt Task 6 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 7  gt Task 7 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 8  gt Task 8 lt  option gt   lt  select gt   lt script gt      var pathArray   window location pathname split             var selectedItem    http   127 0 0 1 5000     pathArray 1          pathArray 2       var trimmedItem   selectedItem trim            select   val trimmedItem    lt  script gt

User · Answer

set value and update dropdown list event      id   val  1234   change

User · Answer

For people using Bootstrap  use    elementId   selectpicker  val   elementValue   instead of     elementId   val  elementValue    as the latter does not update the value in the UI   Note  Even  change   function works  as suggested above in some answers  but it triggers the     elementId   change function      do something    function   Just posting this out there for people referencing this thread in the future

User · Answer

If you just need to set the value of a dropdown then the best way is       ID   val  2      If You have to trigger any script after updating the dropdown value like If you set any onChange event on the dropdown and you want to run this after update the dropdown than You need to use like this       ID   val  2   change

User · Answer

If your dropdown is Asp Net drop down then below code will work fine         lt   DropDownName ClientID  gt    0  selectedIndex 0    But if your DropDown is HTML drop down then this code will work        DropDownName   0  selectedIndex 0

User · Answer

In case when you load all  lt options      gt  lt  options gt  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          country   val countryCode       2   Call this method when ajax call success all html append task complete  For Ex   success  function  doc                          country   append   lt option style  color black   value      key      gt        value     lt  option gt      set ip base country ip base country

User · Answer

I think this may help         getJSON   lt    Url Action  GetDepartment     gt                     coDepartment  paramDepartment                  function data                            autoCompleteDepartment   empty                            autoCompleteDepartment   append     lt option   gt    val -1                          each data  function                                 autoCompleteDepartment   append     lt option   gt    val this CodDepartment  text this DepartmentName                                                    autoCompleteDepartment   val -1                                                                              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

User · Answer

set value and update dropdown list event      id   val  1234   change

User · Answer

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

User · Answer

There are many ways to do it  here are some of them        statusDDL   val  2      OR     select   prop  selectedIndex   3

User · Answer

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

User · Answer

There are many ways to do it  here are some of them        statusDDL   val  2      OR     select   prop  selectedIndex   3

User · Answer

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

User · Answer

If you just need to set the value of a dropdown then the best way is       ID   val  2      If You have to trigger any script after updating the dropdown value like If you set any onChange event on the dropdown and you want to run this after update the dropdown than You need to use like this       ID   val  2   change

User · Answer

mydropdownlist   val  thevalue      just make sure the value in the options tags matches the value in the val method

User · Answer

As suggested by  Nick Berardi  if your changed value is not reflected on the UI front end  try       mydropdownlist   val  thevalue   change

User · Answer

For people using Bootstrap  use    elementId   selectpicker  val   elementValue   instead of     elementId   val  elementValue    as the latter does not update the value in the UI   Note  Even  change   function works  as suggested above in some answers  but it triggers the     elementId   change function      do something    function   Just posting this out there for people referencing this thread in the future

User · Answer

mydropdownlist   val  thevalue      just make sure the value in the options tags matches the value in the val method

User · Answer

Best answer for the question       comboboxid   val yourvalue  trigger  chosen updated      e g       CityID   val 20  trigger  chosen updated      or      CityID   val  chicago   trigger  chosen updated

User · Answer

mydropdownlist   val  thevalue      just make sure the value in the options tags matches the value in the val method

User · Answer

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

User · Answer

Best answer for the question       comboboxid   val yourvalue  trigger  chosen updated      e g       CityID   val 20  trigger  chosen updated      or      CityID   val  chicago   trigger  chosen updated

User · Answer

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    lt select id  select  onChange  window location href this value  gt       lt option value    gt Select a task  lt  option gt       lt option value  http   127 0 0 1 5000 choose form 1  gt Task 1 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 2  gt Task 2 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 3  gt Task 3 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 4  gt Task 4 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 5  gt Task 5 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 6  gt Task 6 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 7  gt Task 7 lt  option gt       lt option value  http   127 0 0 1 5000 choose form 8  gt Task 8 lt  option gt   lt  select gt   lt script gt      var pathArray   window location pathname split             var selectedItem    http   127 0 0 1 5000     pathArray 1          pathArray 2       var trimmedItem   selectedItem trim            select   val trimmedItem    lt  script gt

User · Answer

mydropdownlist   val  thevalue      just make sure the value in the options tags matches the value in the val method

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

Examples related to jquery

Examples related to drop-down-menu