JQuery - how to select dropdown item based on value

Question

I want set a dropdown select  to be change based on the value of the entries   I have   lt select id  mySelect  gt     lt option value  ps  gt Please Select lt  option gt     lt option value  ab  gt Fred lt  option gt     lt option value  fg  gt George lt  option gt     lt option value  ac  gt Dave lt  option gt   lt  select gt    And I know that I want to change the dropdown so that the option with the value of  fg  is selected  How can I do this with JQuery

User · Answer

May be too late to answer  but at least some one will get help   You can try two options   This is the result when you want to assign based on index value  where  0  is Index        mySelect   prop  selectedIndex   0     don t use  attr  since it is deprecated with latest jquery   When you want to select based on option value then choose this         mySelect   val  fg      where  fg  is the option value

User · Answer

I have a different situation  where the drop down list values are already hard coded   There are only 12 districts so the jQuery Autocomplete UI control isn t populated by code   The solution is much easier   Because I had to wade through other posts where it was assumed the control was being dynamically loaded  wasn t finding what I needed and then finally figured it out   So where you have HTML as below  setting the selected index is set like this  note the -input part  which is in addition to the drop down id         project-locationSearch-dist-input   val  1                      lt label id  lblDistDDL  for  project-locationSearch-input-dist  title  Select a district to populate SPNs and PIDs or enter a known SPN or PID   class  control-label  gt District lt  label gt                   lt select id  project-locationSearch-dist  data-tabindex  1  gt                       lt option id  optDistrictOne  value  01  gt 1 lt  option gt                       lt option id  optDistrictTwo  value  02  gt 2 lt  option gt                       lt option id  optDistrictThree  value  03  gt 3 lt  option gt                       lt option id  optDistrictFour  value  04  gt 4 lt  option gt                       lt option id  optDistrictFive  value  05  gt 5 lt  option gt                       lt option id  optDistrictSix  value  06  gt 6 lt  option gt                       lt option id  optDistrictSeven  value  07  gt 7 lt  option gt                       lt option id  optDistrictEight  value  08  gt 8 lt  option gt                       lt option id  optDistrictNine  value  09  gt 9 lt  option gt                       lt option id  optDistrictTen  value  10  gt 10 lt  option gt                       lt option id  optDistrictEleven  value  11  gt 11 lt  option gt                       lt option id  optDistrictTwelve  value  12  gt 12 lt  option gt                   lt  select gt    Something else figured out about the Autocomplete control is how to properly disable empty it   We have 3 controls working together  2 of them mutually exclusive     SPN spnDDL combobox       select  function  event  ui            var spnVal   spnDDL val              fire search event             project-locationSearch-pid-input   val                  project-locationSearch-pid-input   prop  disabled   true           pidDDL empty      empty the pid list             get the labels so we have their tool tips to hand    this way we don t set id values on each label spnDDL siblings  label   tooltip       PID pidDDL combobox       select  function  event  ui            var pidVal   pidDDL val              fire search event             project-locationSearch-spn-input   val                  project-locationSearch-spn-input   prop  disabled   true           spnDDL empty      empty the spn list             Some of this is beyond the scope of the post and I don t know where to put it exactly   Since this is very helpful and took some time to figure out  it s being shared   Und Also     to enable a control like this  it s  disabled  false  and NOT  enabled  true  -- that also took a bit of time to figure out       The only other thing to note  much in addition to the post  is          Note  when working with the jQuery Autocomplete UI control  the xxx-input control is a text input created at the time a selection from the drop down is picked   Thus  it s created at that point in time and its value must be picked fresh   Can t be put into a var and re-used like the drop down list part of the UI control   So you get spnDDL empty   where spnDDL is a var created like var spnDDL       spnDDL    But you can t do this with the input part of the control   Winded explanation  yes   That s how I have to do my notes or 6 months from now I won t know what a short hand note means at all               district         project-locationSearch-dist   combobox           select  function  event  ui                  enable spn and pid drop downs                 project-locationSearch-pid-input   prop  disabled   false                   project-locationSearch-spn-input   prop  disabled   false                 clear them of old values             pidDDL empty                spnDDL empty                  get new values             GetSPNsByDistrict districtDDL val                 GetPIDsByDistrict districtDDL val                         All shared because it took too long to learn these things on the fly   Hope this is helpful

User · Answer

select myselect option value  ab

User · Answer

mySelect   val  ab   change         or       mySelect   val  ab   trigger  change

User · Answer

mySelect   val  fg

User · Answer

You can simply use          select id   val  fg

User · Answer

yourdropddownid   val  fg      Optionally      select gt option eq 3    attr  selected   true     where 3 is the index of the option you want   Live Demo

User · Answer

x000D   x000D      dropdownid   val  selectedvalue    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select id  dropdownid  gt  x000D       lt option value    gt - Please choose - lt  option gt  x000D       lt option value  1  gt 1 lt  option gt  x000D       lt option value  2  gt 2 lt  option gt  x000D       lt option value  selectedvalue  gt There we go  lt  option gt  x000D       lt option value  3  gt 3 lt  option gt  x000D       lt option value  4  gt 4 lt  option gt  x000D       lt option value  5  gt 5 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

You can select dropdown option value by name      deom jQuery   option id   find  option contains  Monday     each function      if  jQuery this  text       Monday         jQuery this  attr  selected   selected

User · Answer

In your case     mySelect   val  fg

User · Answer

This code worked for me    function             id mycolors  option   filter function              return    this  text       Green      To select Green        prop  selected   true        With this HTML select list   lt select id  quot mycolors quot  gt         lt option value  quot 1 quot  gt Red lt  option gt         lt option value  quot 2 quot  gt Green lt  option gt         lt option value  quot 3 quot  gt Blue lt  option gt   lt  select gt

User · Answer

You can use this jQuery code which I find it eaiser to use    x000D   x000D      your id  value 3    attr  selected    true    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select id  your id  name  name  class  form-control input-md  gt  x000D     lt option value  1  gt Option  1 lt  option gt  x000D     lt option value  2  gt Option  2 lt  option gt  x000D     lt option value  3  gt Option  3 lt  option gt  x000D     lt option value  4  gt Option  4 lt  option gt  x000D     lt option value  5  gt Option  5 lt  option gt  x000D     lt option value  6  gt Option  6 lt  option gt  x000D     lt option value  7  gt Option  7 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

You should use     dropdownid   val  selectedvalue     Here s an example   x000D   x000D      dropdownid   val  selectedvalue    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt select id  dropdownid  gt       lt option value    gt - Please choose - lt  option gt       lt option value  1  gt 1 lt  option gt       lt option value  2  gt 2 lt  option gt       lt option value  selectedvalue  gt There we go  lt  option gt       lt option value  3  gt 3 lt  option gt       lt option value  4  gt 4 lt  option gt       lt option value  5  gt 5 lt  option gt   lt  select gt  x000D   x000D   x000D

[javascript] JQuery - how to select dropdown item based on value

Examples related to javascript

Examples related to jquery

Examples related to select

Examples related to jquery-selectors