set option selected attribute from dynamic created option

Question

I have a dynamically created select option using a javascript function  the select object is   lt select name  country  id  country  gt   lt  select gt    when the js function is executed  the  country  object is   lt select name  country  id  country  gt       lt option value  AF  gt Afghanistan lt  option gt       lt option value  AL  gt Albania lt  option gt               lt option value  ID  gt Indonesia lt  option gt               lt option value  ZW  gt Zimbabwe lt  option gt   lt  select gt    and displaying  Indonesia  as default selected option  note   there is no selected  selected  attribute in that option   then I need to set selected  selected  attribute to  Indonesia   and I use this   var country   document getElementById  country    country options country options selectedIndex  setAttribute  selected    selected      using firebug  I can see the  Indonesia  option is like this   lt option value  ID  selected  selected  gt Indonesia lt  option gt    but it fails in IE  tested in IE 8    and then I have tried using jQuery      function             country option selected   attr  selected    selected          it fails both in FFX and IE   I need the  Indonesia  option to have selected  selected  attribute so when I click reset button  it will select  Indonesia  again   changing the js function to dynamically create  country  options is not an option  the solution must work both in FFX and IE   thank you

User · Answer

So many wrong answers   To specify the value that a form field should revert to upon resetting the form  use the following properties    Checkbox or radio button  defaultChecked Any other  lt input gt  control  defaultValue Option in a drop down list  defaultSelected   So  to specify the currently selected option as the default   var country   document getElementById  country    country options country selectedIndex  defaultSelected   true    It may be a good idea to set the defaultSelected value for every option  in case one had previously been set   var country   document getElementById  country    for  var i   0  i  lt  country options length  i          country options i  defaultSelected   i    country selectedIndex      Now  when the form is reset  the selected option will be the one you specified

User · Answer

The ideas on this page were helpful  yet as ever my scenario was different  So  in modal bootstrap   express node js   aws beanstalk  this worked for me   var modal     this   modal find   modal-body select cJourney   val vcJourney  attr  selected   selected      Where my select ID    cJourney  and the drop down value was stored in variable  vcJourney

User · Answer

get the OPTION we want selected var  option       SelectList   children  option value     id            and now set the option we want selected  option attr  selected   true

User · Answer

You re overthinking it   var country   document getElementById  country    country options country options selectedIndex  selected   true

User · Answer

This should work          country  value  ID     attr  selected   selected      If you have function calls bound to the element just follow it with something like       country   change

User · Answer

This works in FF  IE9  var x   document getElementById  country   children 2   x setAttribute  selected    selected

User · Answer

I was trying something like this using the        val   function  but the function did not exist  It turns out that you can manually set the value the same way you do it for an  lt input gt       Set value to Indonesia   ID        country   value    ID       and it get s automatically updated in the select  Works on Firefox at least  you might want to try it out in the others

User · Answer

You could search all the option values until it finds the correct one    var defaultVal    Country       select   find  option   each function           if    this  val      defaultVal               this  prop  selected    selected

User · Answer

Instead of modifying the HTML itself  you should just set the value you want from the relative option element     function             country   val  ID          In this case  ID  is the value of the option  Indonesia

User · Answer

Make option defaultSelected  HTMLOptionElement defaultSelected   true         JS    selector   prop  defaultSelected  true        jQuery     HTMLOptionElement MDN  If the SELECT element is already added to the document  statically or dynamically   to set an option to Attribute-selected and to make it survive a HTMLFormElement reset   - defaultSelected is used    x000D   x000D  const EL country   document querySelector   country    x000D  EL country value    ID        Set SELECT value to  ID    Indonesia   x000D  EL country options EL country selectedIndex  defaultSelected   true     Add Attribute selected to Option Element x000D   x000D  document forms 0  reset        Indonesia  is still selected x000D   lt form gt  x000D     lt select name  country  id  country  gt  x000D       lt option value  AF  gt Afghanistan lt  option gt  x000D       lt option value  AL  gt Albania lt  option gt  x000D       lt option value  HR  gt Croatia lt  option gt  x000D       lt option value  ID  gt Indonesia lt  option gt  x000D       lt option value  ZW  gt Zimbabwe lt  option gt  x000D     lt  select gt  x000D   lt  form gt  x000D   x000D   x000D    The above will also work if you build the options dynamically  and than  only afterwards  you want to set one option to be defaultSelected    x000D   x000D  const countries     x000D    AF   Afghanistan   x000D    AL   Albania   x000D    HR   Croatia   x000D    ID   Indonesia   x000D    ZW   Zimbabwe   x000D     x000D   x000D  const EL country   document querySelector   country    x000D   x000D      Bad example  Ideally use  createDocumentFragment   and  appendChild   methods  x000D  EL country innerHTML   Object keys countries  reduce  str  key    gt  str      lt option value    key   gt   countries key   lt  option gt          x000D   x000D  EL country value    ID   x000D  EL country options EL country selectedIndex  defaultSelected   true  x000D   x000D  document forms 0  reset        Indonesia  is still selected x000D   lt form gt  x000D     lt select name  country  id  country  gt  lt  select gt  x000D   lt  form gt  x000D   x000D   x000D      Make option defaultSelected while dynamically creating options  To make an option selected while populating the SELECT Element  use the Option   constructor MDN      var optionElementReference   new Option text  value  defaultSelected  selected      x000D   x000D  const countries     x000D    AF   Afghanistan   x000D    AL   Albania   x000D    HR   Croatia   x000D    ID   Indonesia           lt  lt  lt  make this one defaultSelected x000D    ZW   Zimbabwe   x000D     x000D   x000D  const EL country   document querySelector   country    x000D  const DF options   document createDocumentFragment    x000D   x000D  Object keys countries  forEach key   gt    x000D    const isIndonesia   key      ID       Boolean x000D    DF options appendChild new Option countries key   key  isIndonesia  isIndonesia   x000D      x000D   x000D  EL country appendChild DF options   x000D   x000D  document forms 0  reset        Indonesia  is still selected x000D   lt form gt  x000D     lt select name  country  id  country  gt  lt  select gt  x000D   lt  form gt  x000D   x000D   x000D    In the demo above Document createDocumentFragment is used to prevent rendering elements inside the DOM in a loop  Instead  the fragment  containing all the Options  is appended to the Select only once     SELECT value vs  OPTION setAttribute vs  OPTION selected vs  OPTION defaultSelected  Although some  older  browsers interpret the OPTION s selected attribute as a  string  state  the WHATWG HTML Specifications html spec whatwg org state that it should represent a Boolean selectedness     The selectedness of an option element is a boolean state  initially false  Except where otherwise specified  when the element is created  its selectedness must be set to true if the element has a selected attribute    html spec whatwg org - Option selectedness   one can correctly deduce that just the name selected in  lt option value  foo  selected gt  is enough to set a truthy state     Comparison test of the different methods   x000D   x000D  const EL select   document querySelector   country    x000D  const TPL options     x000D     lt option value  AF  gt Afghanistan lt  option gt  x000D     lt option value  AL  gt Albania lt  option gt  x000D     lt option value  HR  gt Croatia lt  option gt  x000D     lt option value  ID  gt Indonesia lt  option gt  x000D     lt option value  ZW  gt Zimbabwe lt  option gt  x000D     x000D   x000D     https   developer mozilla org en-US docs Web API MutationObserver MutationObserver x000D  const mutationCB    mutationsList  observer    gt    x000D    mutationsList forEach mu   gt    x000D      const EL   mu target  x000D      if  mu type      attributes     x000D        return console log    Attribute   mu attributeName  Mutation    EL value    EL text      x000D        x000D        x000D     x000D   x000D      PREPARE SOME TEST FUNCTIONS  x000D   x000D  const testOptionsSelectedByProperty        gt    x000D    const test    OPTION with Property selected    x000D    try   x000D      const EL       EL select options  find opt   gt  opt selected   x000D      console log    test    EL value    EL text   PropSelectedValue    EL selected     x000D      catch  e    x000D      console log    test  NOT FOUND     x000D      x000D     x000D   x000D  const testOptionsSelectedByAttribute        gt    x000D    const test    OPTION with Attribute selected   x000D    try   x000D      const EL       EL select options  find opt   gt  opt hasAttribute  selected     x000D      console log    test    EL value    EL text   AttrSelectedValue    EL getAttribute  selected       x000D      catch  e    x000D      console log    test  NOT FOUND     x000D      x000D     x000D   x000D  const testSelect        gt    x000D    console log  SELECT value   EL select value  selectedIndex   EL select selectedIndex     x000D    x000D   x000D  const formReset        gt    x000D    EL select value       x000D    EL select innerHTML   TPL options  x000D       Attach MutationObserver to every Option to track if Attribute will change x000D        EL select options  forEach EL option   gt    x000D      const observer   new MutationObserver mutationCB   x000D      observer observe EL option   attributes  true    x000D        x000D    x000D   x000D     ----------- x000D     LET S TEST   x000D   x000D  console log   n1  Set SELECT value    x000D  formReset    x000D  EL select value    AL      Constatation  MutationObserver did NOT triggered     x000D  testOptionsSelectedByProperty    x000D  testOptionsSelectedByAttribute    x000D  testSelect    x000D   x000D  console log   n2  Set HTMLElement setAttribute      x000D  formReset    x000D  EL select options 2  setAttribute  selected   true      MutationObserver triggers x000D  testOptionsSelectedByProperty    x000D  testOptionsSelectedByAttribute    x000D  testSelect    x000D   x000D  console log   n3  Set HTMLOptionElement defaultSelected    x000D  formReset    x000D  EL select options 3  defaultSelected   true     MutationObserver triggers x000D  testOptionsSelectedByProperty    x000D  testOptionsSelectedByAttribute    x000D  testSelect    x000D   x000D  console log   n4  Set SELECT value and HTMLOptionElement defaultSelected    x000D  formReset    x000D  EL select value    ZW  x000D  EL select options EL select selectedIndex  defaultSelected   true     MutationObserver triggers x000D  testOptionsSelectedByProperty    x000D  testOptionsSelectedByAttribute    x000D  testSelect    x000D   x000D     END    x000D  console log   n   Getting MutationObservers out from call-stack       x000D   lt form gt  x000D     lt select name  country  id  country  gt  lt  select gt  x000D   lt  form gt  x000D   x000D   x000D    Although the test 2  using  setAttribute   seems at first the best solution since both the Element Property and Attribute are unison  it can lead to confusion  specially because  setAttribute expects two parameters   EL select options 1  setAttribute  selected   false       lt option value  AL  selected  false  gt     But still selected    will actually make the option selected  Should one use  removeAttribute   or perhaps  setAttribute  selected        to another value  Or should one read the state by using  getAttribute  selected   or by using  hasAttribute  selected      Instead test 3   and 4   using defaultSelected gives the expected results    Attribute selected as a named Selectedness state   Property selected on the Element Object  with a Boolean value

User · Answer

What you want to do is set the selectedIndex attribute of the select box   country options selectedIndex   index of indonesia    Changing the  selected  attribute will generally not work in IE   If you really want the behavior you re describing  I suggest you write a custom javascript reset function to reset all the other values in the form to their default

User · Answer

select   document getElementById  selectId    var opt   document createElement  option        opt value    value       opt innerHTML    name       opt selected   true      select appendChild opt

User · Answer

Realize this is an old question  but with the newer version of JQuery you can now do the following      option val ID    prop  selected  true     This accomplishes the same thing as Box9 s selected answer in one line

User · Answer

To set value in JavaScript using set attribute   for selected option tag var newvalue   10  var x   document getElementById  quot optionid quot   selectedIndex      document getElementById  quot optionid quot   x  setAttribute  value   newvalue

User · Answer

Get  lt select gt  object var sel      country        Loop through and look for value match  then break for i 0 i lt sel length i      if sel value   ID     break          Select index  sel options selectedIndex   i    Begitu loh

User · Answer

To set the input option at run time try setting the  checked  value   even if it isn t a checkbox   elem checked true    Where elem is a reference to the option to be selected   So for the above issue   var country   document getElementById  country    country options country options selectedIndex  checked true    This works for me  even when the options are not wrapped in a    If all of the  tags share the same name  they should uncheck when the new one is checked

User · Answer

Good question  You will need to modify the HTML itself rather than rely on DOM properties   var opt      option val ID         html       lt div gt    append opt clone    html    html   html replace    gt      selected  selected  gt     opt replaceWith html     The code grabs the option element for Indonesia  clones it and puts it into a new div  not in the document  to retrieve the full HTML string   lt option value  ID  gt Indonesia lt  option gt    It then does a string replace to add the attribute selected  selected  as a string  before replacing the original option with this new one   I tested it on IE7  See it with the reset button working properly here  http   jsfiddle net XmW49

[javascript] set option "selected" attribute from dynamic created option

Examples related to javascript

Examples related to jquery

Examples related to select

Examples related to attributes

Examples related to option