Set selected option of select box

Question

I want to set a option that was selected previously to be displayed on page load  I tried it with the following code       gate   val  Gateway 2      with   lt select id  gate  gt       lt option value  null  gt - choose - lt  option gt       lt option value  gateway 1  gt Gateway 1 lt  option gt       lt option value  gateway 2  gt Gateway 2 lt  option gt   lt  select gt    But this does not work  Any ideas

User · Answer

function         demo   val  hello

User · Answer

Some cases may be      gate option value   data Gateway2      attr  selected   true

User · Answer

Make option have a  selected  attribute using jQuery  var yourValue    Gateway 2        gate   find  option   each function  i  opt         if  opt value     yourValue              opt  attr  selected    selected

User · Answer

This definitely should work  Here s a demo  Make sure you have placed your code into a   document  ready     function             gate   val  gateway 2

User · Answer

gate   val  Gateway 2   prop  selected   true

User · Answer

I had the same problem    Solution  add a refresh       gate   val  Gateway 2        gate   selectmenu  refresh

User · Answer

My problem  get courses         To load the course list     course   val course        Setting default value of the list   I had the same issue   The Only difference from your code is that I was loading the select box through an ajax call and soon as the ajax call was executed I had set the default value of the select box  The Solution  get courses       setTimeout function              course   val course        10

User · Answer

That works fine  See this fiddle  http   jsfiddle net kveAL   It is possible that you need to declare your jQuery in a   document  ready   handler    Also  might you have two elements that have the same ID

User · Answer

I had a problem where the value was not set because of a syntax error before the call       someId   value 33     script bailed here without showing any errors Note   value instead of  val     gate   val  Gateway 2      this line didn t work    Check for syntax errors before the call

User · Answer

Addition to  icksde and  Korah  thx both    When building the options with AJAX the document ready may be triggered before the list is built  so   This doesn t work    document  ready function             gate   val  Gateway 2          This does  A timeout does work but as  icksde says it s fragile  I did actually need 20ms in stead of 10ms   It s better to fit it inside the AJAX function like this       someObject   change function           get  website page php    parameters   function data                gate   append   lt option value  Gateway 2   gt      Gateway 2      lt  option gt                 gate   val  Gateway 2            json

User · Answer

I know this has an accepted answer  but in reading the replies on the answer  I see some things that I can clear up that might help other people having issues with events not triggering after a value change  This will select the value in the drop-down     quot  gate quot   val  quot gateway 2 quot    If this select element is using JQueryUI or other JQuery wrapper  use the refresh method of the wrapper to update the UI to show that the value has been selected  The below example is for JQueryUI  but you will have to look at the documentation for the wrapper you are using to determine the correct method for the refresh     quot  gate quot   selectmenu  quot refresh quot     If there is an event that needs to be triggered such as a change event  you will have to trigger that manually as changing the value does not fire the event   The event you need to fire depends on how the event was created  If the event was created with JQuery i e     quot  gate quot   on  quot change quot  function      then trigger the event using the below method     quot  gate quot   change     If the event was created using a standard JavaScript event i e   then trigger the event using the below method  var JSElem      quot  gate quot   0   if   quot createEvent quot  in document        var evt   document createEvent  quot HTMLEvents quot        evt initEvent  quot change quot   false  true       JSElem dispatchEvent evt     else       JSElem fireEvent  quot onchange quot

User · Answer

I have found using the jQuery  val   method to have a significant drawback    lt select id  gate  gt  lt  select gt      gate   val  Gateway 2      If this select box  or any other input object  is in a form and there is a reset button used in the form  when the reset button is clicked the set value will get cleared and not reset to the beginning value as you would expect   This seems to work the best for me   For Select boxes    lt select id  gate  gt  lt  select gt      gate option value  Gateway 2     attr  selected   true     For text inputs   lt input type  text  id  gate    gt      gate   attr  value    your desired value     For textarea inputs   lt textarea id  gate  gt  lt  textarea gt      gate   html  your desired value     For checkbox boxes   lt input type  checkbox  id  gate    gt      gate option value  Gateway 2     attr  checked   true     For radio buttons   lt input type  radio  id  gate  value  this   gt  or  lt input type  radio  id  gate  value  that   gt      gate value  this     attr  checked   true

User · Answer

form-field   val  5   trigger  change

User · Answer

I know there are several iterations of answers but now this doesn t require jquery or any other external library and can be accomplished pretty easy just with the following    x000D   x000D  document querySelector   gate option value  Gateway 2     setAttribute  selected  true   x000D   lt select id  gate  gt  x000D       lt option value  null  gt - choose - lt  option gt  x000D       lt option value  Gateway 1  gt Gateway 1 lt  option gt  x000D       lt option value  Gateway 2  gt Gateway 2 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

document  ready function             gate option value  Gateway 2     prop  selected   true          you need to specify id of combo to set right combo  if more than one combo

User · Answer

This would be another option       id 100 option value val2    prop  selected   true

[jquery] Set selected option of select box

Examples related to jquery

Examples related to html

Examples related to jquery-selectors

Examples related to html-select