How to set the selected option of a select dropdown list with jquery

Question

I have the following jquery function     post  GetSalesRepfromCustomer         data  selectedObj value    function  result        alert result 0           select name   salesrep     val result 0          result 0  is a value that I want to set as the selected item in my select box  result 0  equals Bruce jones   the select box is populated by a database query but one of the rendered html is    lt select id  salesrep  data-theme  a  data-mini  true  name  salesrep  gt   lt option value    gt   lt  option gt   lt option value  john smith  gt john smith lt  option gt   lt option value  Bruce Jones  gt Bruce Jones lt  option gt   lt option value  Adam Calitz  gt Adam Calitz lt  option gt   lt option gt 108 lt  option gt   lt  select gt       select name   salesrep     val result 0    doesn t populate the select box selected option  I have also tried     salesrep   val result 0    without any luck   Any help appreciated   so what I want is the selected   highlighted option in the salesrep dropdown list to be Bruce Jones   HTML to be    lt select id  salesrep  data-theme  a  data-mini  true  name  salesrep  gt   lt option value    gt   lt  option gt   lt option value  john smith  gt john smith lt  option gt   lt option value  Bruce Jones  selected  gt Bruce Jones lt  option gt   lt option value  Adam Calitz  gt Adam Calitz lt  option gt   lt option gt 108 lt  option gt   lt  select gt    Thanks again   Entire Script   lt script type  text javascript  gt         document  ready function                      customer   autocomplete                source   get customers         messages                noResults            results  function                     select  function  event  ui                  var selectedObj   ui item                  post  GetSalesRepfromCustomer    data selectedObj value  function result           alert result 0           var selnametest  Bruce Koller           salesrep   val selnametest                                               lt  script gt    Rendered HTML is    lt select id  salesrep  data-theme  a  data-mini  true  name  salesrep  gt   lt option value    gt   lt  option gt   lt option value  RyanLubuschagne  gt Ryan Lubuschagne lt  option gt   lt option value  Bruce Jones  gt Bruce Jones lt  option gt   lt option value  Adam Calitz  gt Adam Calitz lt  option gt   lt  select gt

User · Answer

Set the value it will set it as selected option for dropdown:

$("#salesrep").val("Bruce Jones");

Here is working Demo

If it still not working:

Please check JavaScript errors on console.
Make sure you included jquery files
your network is not blocking jquery file if using externally.
Check your view source some time exact copy of element stop jquery to work correctly

User · Answer

Try this       select name   salesrep   option value  Bruce Jones     attr  selected   selected      Just replace option value  Bruce Jones   by option value result 0    And before selecting a new option  you might want to  unselect  the previous        select name   salesrep   option selected   attr  selected  null     You may want to read this too   jQuery get specific option tag text  Edit  Using jQuery Mobile  this link may provide a good solution   jquery mobile - set select option values

User · Answer

The match between  val  Bruce jones   and value  Bruce Jones  is case-sensitive  It looks like you re capitalizing Jones in one but not the other   Either track down where the difference comes from  use id s instead of the name  or call  toLowerCase   on both

User · Answer

One thing I don t think anyone has mentioned  and a stupid mistake I ve made in the past  especially when dynamically populating selects   jQuery s  val   won t work for a select input if there isn t an option with a value that matches the value supplied   Here s a fiddle explaining -  http   jsfiddle net go164zmt    lt select id  example  gt       lt option value  0  gt Test0 lt  option gt       lt option value  1  gt Test1 lt  option gt   lt  select gt       example   val  0    alert     example   val         example   val  1    alert     example   val        doesn t exist     example   val  2      and thus returns null alert     example   val

User · Answer

You have to replace YourID and value  3  for your current ones    x000D   x000D    document  ready function     x000D        YourID option value  3     attr  selected    selected    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 2 3 jquery min js  gt  lt  script gt  x000D   lt select id  YourID  gt  x000D     lt option value  1  gt A lt  option gt  x000D     lt option value  2  gt B lt  option gt  x000D     lt option value  3  gt C lt  option gt  x000D     lt option value  4  gt D lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    and value  3  for your current ones       YourID option value  3     attr  selected    selected      lt select id  YourID   gt   lt option value  1  gt A  lt  option gt   lt option value  2  gt B lt  option gt   lt option value  3  gt C lt  option gt   lt option value  4  gt D lt  option gt   lt  select gt

User · Answer

x000D   x000D    document  ready function     x000D        YourID option value  3     attr  selected    selected    x000D        YourID option selected   attr  selected  null   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 2 3 jquery min js  gt  lt  script gt  x000D   lt select id  YourID  gt  x000D     lt option value  1  gt A lt  option gt  x000D     lt option value  2  gt B lt  option gt  x000D     lt option value  3  gt C lt  option gt  x000D     lt option value  4  gt D lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

[jquery] How to set the 'selected option' of a select dropdown list with jquery

Examples related to jquery

Examples related to html

Examples related to selected

Examples related to html-select