Set select option selected by value

Question

I have a select field with some options in it  Now I need to select one of those options with jQuery  But how can I do that when I only know the value of the option that must be selected   I have the following HTML    lt div class  id 100  gt     lt select gt       lt option value  val1  gt Val 1 lt  option gt       lt option value  val2  gt Val 2 lt  option gt       lt option value  val3  gt Val 3 lt  option gt     lt  select gt   lt  div gt    I need to select the option with value val2  How can this be done   Here s a demo page  http   jsfiddle net 9Stxb

User · Answer

Is old post but here is one simple function what act like jQuery plugin.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

You just simple can do something like this:

$('.id_100').selectOption('val2');

Reson why use this is because you change selected satemant into DOM what is crossbrowser supported and also will trigger change to you can catch it.

Is basicaly human action simulation.

User · Answer

For me the following did the job     div id 100   val  val2   change

User · Answer

Just put in this code       Controls ID   val value

User · Answer

it works for me      id 100   val  val2

User · Answer

You can select on any attribute and its value by using the attribute selector  attributename optionalvalue   so in your case you can select the option and set the selected attribute      div id 100  gt  select  gt  option value     value        prop  selected  true     Where value is the value you wish to select by   If you need to removed any prior selected values  as would be the case if this is used multiple times you d need to change it slightly so as to first remove the selected attribute     div id 100 option selected   prop  selected  false      div id 100 option value     value                 prop  selected  true

User · Answer

attr   sometimes doesn t work in older jQuery versions  but you can use  prop        select ddlCountry option   each function          if    this  text   toLowerCase      co toLowerCase                this  prop  selected   selected            return

User · Answer

a simple answer is  at html   lt select name  ukuran  id  idUkuran  gt       lt option value  1000  gt pilih ukuran lt  option gt       lt option value  11  gt M lt  option gt       lt option value  12  gt L lt  option gt       lt option value  13  gt XL lt  option gt   lt  select gt    on jquery  call below function by button or whatever      idUkuran   val 11  change      it simple and 100  works  coz its taken from my work       hope its help

User · Answer

The easiest way to do that is   HTML   lt select name  dept  gt      lt option value    gt Which department does this doctor belong to  lt  option gt      lt option value  1  gt Orthopaedics lt  option gt      lt option value  2  gt Pathology lt  option gt      lt option value  3  gt ENT lt  option gt   lt  select gt    jQuery     select name  dept     val  3         Output  This will activate ENT

User · Answer

Source Link   Use val   jQuery Method for Single and Multiple Value Selection in DropDown        function                  button   click function                      myDropDownSingle   val  5                    myDropDownMultiple   val   5    4    8                            HTML   lt p gt       lt h5 gt Single Selection lt  h5 gt       lt select id  myDropDownSingle  class  form-control  gt           lt option value  0  gt Select Value 0 lt  option gt           lt option value  8  gt Option value 8 lt  option gt           lt option value  5  gt Option value 5 lt  option gt           lt option value  4  gt Option value 4 lt  option gt       lt  select gt   lt  p gt   lt p gt       lt h5 gt Multiple Selection lt  h5 gt       lt select id  myDropDownMultiple  class  form-control  multiple gt           lt option value  0  gt Select Value 0 lt  option gt           lt option value  8  gt Option value 8 lt  option gt           lt option value  5  gt Option value 5 lt  option gt           lt option value  4  gt Option value 4 lt  option gt       lt  select gt   lt  p gt    lt p gt       lt button gt Get Value and Text on Button Click lt  button gt   lt  p gt

User · Answer

This Works well      jQuery   id 100   change function             var value   jQuery   id 100   val      it gets you the value of selected option          console log value      you can see your sected values in console  Eg 1 2 3

User · Answer

Best way is like this       YourSelect option value    YourValue      prop  selected   true

User · Answer

You must take it in mind the value you want to change dynamically  must be same as one present in the options you define in your HTML as it is case sensative  You can change your select box dynamically as follows       div YOUR ID   val VALUE CHANGED  change      value must present in options you selected otherwise it will not work

User · Answer

This works for sure for Select Control      select ddlCountry option   each function      if    this  text   toLowerCase      co toLowerCase          this selected   true      return

User · Answer

An issue I ran into when the value is an ID and the text is a code  You cannot set the value using the code but you don t have direct access to the ID   var value       selectorId  gt  option   each function        if   SOMECODE        this  text          value     this  val               Do work here

User · Answer

You can achieve this with different methods   remember if an element is to be operated  better give it an id or class  rather than having it s parent element an id or class   Here  As the div has a class to target the select inside it  code will be     quot div id 100 select quot   val  quot val2 quot     or    div id 100  option value  quot val2 quot     prop  quot selected quot   true    If the class would have been given to select itself  code will be     quot  id 100 quot   val  quot val2 quot     or     id 100 option value val2    attr  selected   selected     or     id 100 option        removeAttr  selected        filter   value val1         attr  selected   true    To pass the value dynamically  code will be  valu  quot val2 quot      quot div id 100 select quot   val valu      quot div id 100  gt  select  gt  option value  quot    valu    quot   quot   prop  quot selected quot  true    If element is added through ajax  You will have to give  id  to your element and use window document getElementById else You will have to give  class  to your element and use window document getElementById You can also select value of select element by it s index number  If you have given ID to your select element  code will be  window document getElementById  select element   selectedIndex   4   Remember when you change the select value as said above  change method is not called  i e  if you have written code to do some stuff on change of select the above methods will change the select value but will not trigger the change  for to trigger the change function you have to add  change   at the end  so the code will be     quot  select id quot   val  quot val2 quot   change

User · Answer

There s no reason to overthink this  all you are doing is accessing and setting a property  That s it   Okay  so some basic dom  If you were doing this in straight JavaScript  it you would this   window document getElementById  my stuff   selectedIndex   4    But you re not doing it with straight JavaScript  you re doing it with jQuery  And in jQuery  you want to use the  prop   function to set a property  so you would do it like this       my stuff   prop  selectedIndex   4     Anyway  just make sure your id is unique  Otherwise  you ll be banging your head on the wall wondering why this didn t work

User · Answer

graphtype  option value       prop  selected   true    This works well where  graphtype is the id of the select tag   example select tag     lt select name  site  id  site  class  form-control  onchange  getgraph1 this options this selectedIndex  value    gt       lt option value    selected gt Site lt  option gt        lt option value  sitea  gt SiteA lt  option gt       lt option value  siteb  gt SiteB lt  option gt     lt  select gt

User · Answer

I think the easiest way is selecting to set val    but you can check the following  See How to handle select and option tag in jQuery  for more details about options      div id 100  option value  val2     prop  selected   true       id 100   val  val2      Not optimised  but the following logic is also useful in some cases       id 100 option   each function         if   this  val       val2               this  prop  selected   true

User · Answer

Deselect all first and filter the selectable options       id 100 option         removeAttr  selected         filter   value val1              attr  selected   true

User · Answer

It s better to use change   after setting select value      div id 100 select   val  val2   change        By doing this  the code will close to changing select by user  the explanation is included in JS Fiddle    JS Fiddle

User · Answer

lt select name  contribution status id  id  contribution status id  class  form-select  gt       lt option value  1  gt Completed lt  option gt       lt option value  2  gt Pending lt  option gt       lt option value  3  gt Cancelled lt  option gt       lt option value  4  gt Failed lt  option gt       lt option value  5  gt In Progress lt  option gt       lt option value  6  gt Overdue lt  option gt       lt option value  7  gt Refunded lt  option gt      Setting to Pending Status by value         contribution status id   val  2

User · Answer

To select an option with value  val2        id 100 option value val2    attr  selected   selected

User · Answer

Use      div id 100  gt  select  gt  option value     value        attr  selected  true     This works for me  I m using this code for parsing a value in a fancybox update form  and my full source from app js is   jQuery   fancybox-btn-upd   click function        var ebid   jQuery this  val         jQuery ajax           type   POST           url  js base url  manajemen cms get ebook data           data   ebookid ebid           success  function transport               var re   jQuery parseJSON transport               jQuery   upd-kategori option value   re  kategori        attr  selected  true               document getElementById  upd-nama   setAttribute  value  re  judul                 document getElementById  upd-penerbit   setAttribute  value  re  penerbit                 document getElementById  upd-tahun   setAttribute  value  re  terbit                 document getElementById  upd-halaman   setAttribute  value  re  halaman                 document getElementById  upd-bahasa   setAttribute  value  re  bahasa                  var content   jQuery   fancybox-form-upd   html                jQuery fancybox                   type   ajax                   prevEffect   none                   nextEffect   none                   closeBtn  true                  content  content                  helpers                        title                            type   inside                                                                                  And my PHP code is   function get ebook data          ebkid    this- gt input- gt post  ebookid         rs    this- gt mod manajemen- gt get ebook detail  ebkid        hasil  id      ebkid      foreach   rs as  row             hasil  judul      row- gt ebook judul           hasil  kategori      row- gt ebook cat id           hasil  penerbit      row- gt ebook penerbit           hasil  terbit      row- gt ebook terbit           hasil  halaman      row- gt ebook halaman           hasil  bahasa      row- gt ebook bahasa           hasil  format      row- gt ebook format             this- gt output- gt set output json encode  hasil

User · Answer

Use the change   event after selecting the value  From the docs      If the field loses focus without the contents having changed  the event is not triggered  To trigger the event manually  apply  change   without arguments        select id   val  val2   change      More information is at  change

User · Answer

There seems to be an issue with select drop down controls not dynamically changing when the controls are dynamically created instead of being in a static HTML page   In jQuery this solution worked for me       editAddMake   val result data make id       editAddMake   selectmenu  refresh      Just as an addendum the first line of code without the second line  did actually work transparently in that  retrieving the selected index was correct after setting the index and if you actually clicked the control it would show the correct item but this didn t reflect in the top label of the control   Hope this helps

User · Answer

There s an easier way that doesn t require you to go into the options tag      div id 100 select   val  val2      Check out the this jQuery method

User · Answer

var opt   new Option name  id       selectboxName   append opt   opt setAttribute  selected   selected

User · Answer

Try this   Simple yet effective javaScript   jQuery the lethal combo   SelectComponent      lt select id  YourSelectComponentID  gt               lt option value  0  gt Apple lt  option gt               lt option value  2  gt Banana lt  option gt               lt option value  3  gt Cat lt  option gt               lt option value  4  gt Dolphin lt  option gt   lt  select gt    Selection    document getElementById  YourSelectComponentID   value   4    Now your option 4 will be selected  You can do this  to select the values on start by default     function       document getElementById  YourSelectComponentID   value   4        or create a simple function put the line in it and call the function on anyEvent to select the option  A mixture of jQuery   javaScript does the magic

[jquery] Set select option 'selected', by value

Examples related to jquery

Examples related to jquery-selectors

Examples related to html-select