Javascript Get Values from Multiple Select Option Box

Question

This one is driving me nuts  It   s got to be something simple and stupid that I am overlooking   I have a multiple select box in a form  I am just trying to get the values that are selected  In my loop  if I use alert then I have no problem  As soon as try to concatenate the values I get the error    SelBranch      selected  is null or not an object         lt form name  InventoryList  method  post  action  InventoryList asp  gt             lt select name  SelBranch  class  bnotes  size  5  multiple  multiple  gt             lt option value  All  gt All lt  option gt             lt option value  001 Renton  gt 001 Renton lt  option gt             lt option value  002 Spokane  gt 002 Spokane lt  option gt             lt option value  003 Missoula  gt 003 Missoula lt  option gt             lt option value  004 Chehalis  gt 004 Chehalis lt  option gt             lt option value  005 Portland  gt 005 Portland lt  option gt             lt option value  006 Anchorage  gt 006 Anchorage lt  option gt             lt option value  018 PDC  gt 018 PDC lt  option gt             lt  select gt             lt input type  button  name  ViewReport  value  View  class  bnotes  onclick  GetInventory     gt       lt  form gt        lt script language  JavaScript  gt         function GetInventory                     var InvForm   document forms InventoryList           var SelBranchVal                var x   0            for  x 0 x lt  InvForm SelBranch length x                           if  InvForm SelBranch x  selected                               alert InvForm SelBranch x  value                SelBranchVal   SelBranchVal         InvForm SelBranch x  value                                    alert SelBranchVal                 lt  script gt

User · Accepted Answer

The for loop is getting one extra run  Change  for  x 0 x lt  InvForm SelBranch length x      to  for  x 0  x  lt  InvForm SelBranch length  x

User · Answer

Here i am posting the answer just for reference which may become useful    lt  DOCTYPE html gt   lt html gt   lt head gt   lt script gt  function show          var InvForm   document forms form       var SelBranchVal            var x   0       for  x 0 x lt InvForm kb length x                           if InvForm kb x  selected                               alert InvForm kb x  value                SelBranchVal   InvForm kb x  value         SelBranchVal                                     alert SelBranchVal      lt  script gt   lt  head gt   lt body gt   lt form name  form  gt   lt select name  kb  id  kb  onclick  show     multiple gt   lt option value  India  gt India lt  option gt   lt option selected  selected  value  US  gt US lt  option gt   lt option value  UK  gt UK lt  option gt   lt option value  Japan  gt Japan lt  option gt   lt  select gt   lt  --input type  submit  name  cmdShow  value  Customize Fields   onclick  show     id  cmdShow   -- gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

Take a look at HTMLSelectElement selectedOptions   HTML   lt select name  north-america  multiple gt     lt option valud  ca  selected gt Canada lt  a gt     lt option value  mx  selected gt Mexico lt  a gt     lt option value  us  gt USA lt  a gt   lt  select gt    JavaScript  var elem   document querySelector  select     console log elem selectedOptions       gt  HTMLCollection   lt option value  ca  gt Canada lt  option gt    lt option value  mx  gt Mexico lt  option gt     This would also work on non-multiple  lt select gt  elements    Warning  Support for this selectedOptions seems pretty unknown at this point

User · Answer

Also  change this       SelBranchVal   SelBranchVal         InvForm SelBranch x  value    to       SelBranchVal   SelBranchVal   InvForm SelBranch x  value          The reason is that for the first time the variable SelBranchVal will be empty

[javascript] Javascript Get Values from Multiple Select Option Box

Examples related to javascript

Examples related to drop-down-menu

Examples related to multiple-select