Javascript to Select Multiple options

Question

I have a form with a select box that allows multiple options  After a user saves these options  it stores them in a database table    I can then read this database table to get the options they chose one again  I need to be able to grab this data from the database  put it into an array  then have the options in that select box to be pre-selected when they go to  Edit  their options   Reading the data into an array is fine  and I know how to make a single option selected within a select box  however I m not sure how to handle multiple options being selected in javascript   Can someone help me figure out the javascript required to do this

User · Answer

Based on  Peter Baley answer  I created a more generic function       objectId  HTML object ID     values  can be a string or an array  String is less  secure   should not contain repeated value      function checkMultiValues objectId  values           selectMultiObject document getElementById objectId           for   var i   0  l   selectMultiObject options length  o  i  lt  l  i                         o   selectMultiObject options i             if   values indexOf  o value      -1                           o selected   true              else               o selected   false                                Example  checkMultiValues  thisMultiHTMLObject   a b c d

User · Answer

You can get access to the options array of a selected object by going document getElementById  cars   options where  cars  is the select object   Once you have that you can call option i  setAttribute  selected    selected    to select an option   I agree with every one else that you are better off doing this server side though

User · Answer

This type of thing should be done server-side  so as to limit the amount of resources used on the client for such trivial tasks  That being said  if you were to do it on the front-end  I would encourage you to consider using something like underscore js to keep the code clean and concise   var values     Red    Green        colors   document getElementById  colors       each colors options  function  option        option selected      indexOf values  option text         If you re using jQuery  it could be even more terse   var values     Red    Green         colors option   prop  selected   function          return    inArray this text  values         If you were to do this without a tool like underscore js or jQuery  you would have a bit more to write  and may find it to be a bit more complicated   var color  i  j      values     Red    Green        options   document getElementById  colors   options   for   i   0  i  lt  values length  i           for   j   0  color   values i   j  lt  options length  j               options j  selected   options j  selected    color     options j  text

User · Answer

A pure javascript solution   lt select id  choice  multiple  multiple  gt     lt option value  1  gt One lt  option gt     lt option value  2  gt two lt  option gt     lt option value  3  gt three lt  option gt   lt  select gt   lt script type  text javascript  gt   var optionsToSelect     One    three    var select   document getElementById   choice      for   var i   0  l   select options length  o  i  lt  l  i         o   select options i     if   optionsToSelect indexOf  o text      -1           o selected   true          lt  script gt    Although I agree this should be done server-side

User · Answer

lt script language  JavaScript  type  text javascript  gt   lt  -- function loopSelected       var txtSelectedValuesObj   document getElementById  txtSelectedValues      var selectedArray   new Array      var selObj   document getElementById  selSeaShells      var i    var count   0    for  i 0  i lt selObj options length  i          if  selObj options i  selected          selectedArray count    selObj options i  value        count                txtSelectedValuesObj value   selectedArray    function openInNewWindow frm         open a blank window   var aWindow   window open      Tutorial004NewWindow       scrollbars yes menubar yes resizable yes toolbar no width 400 height 400          set the target to the blank window   frm target    Tutorial004NewWindow         submit   frm submit        -- gt   lt  script gt  The HTML  lt form action  tutorial004 nw html  method  get  gt     lt table border  1  cellpadding  10  cellspacing  0  gt     lt tr gt       lt td valign  top  gt         lt input type  button  value  Submit  onclick  openInNewWindow this form      gt         lt input type  button  value  Loop Selected  onclick  loopSelected       gt         lt br   gt         lt select name  selSea  id  selSeaShells  size  5  multiple  multiple  gt           lt option value  val0  selected gt sea zero lt  option gt           lt option value  val1  gt sea one lt  option gt           lt option value  val2  gt sea two lt  option gt           lt option value  val3  gt sea three lt  option gt           lt option value  val4  gt sea four lt  option gt         lt  select gt       lt  td gt       lt td valign  top  gt         lt input type  text  id  txtSelectedValues    gt        selected array      lt  td gt     lt  tr gt     lt  table gt   lt  form gt

[javascript] Javascript to Select Multiple options

Examples related to javascript

Examples related to forms

Examples related to html-select

Examples related to options