Javascript Get Values from Multiple Select Option

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

      <form name="InventoryList" method="post" action="InventoryList.asp">
          <select name="SelBranch" class="bnotes" size="5" multiple="multiple">
          <option value="All">All</option>
          <option value="001 Renton">001 Renton</option>
          <option value="002 Spokane">002 Spokane</option>
          <option value="003 Missoula">003 Missoula</option>
          <option value="004 Chehalis">004 Chehalis</option>
          <option value="005 Portland">005 Portland</option>
          <option value="006 Anchorage">006 Anchorage</option>
          <option value="018 PDC">018 PDC</option>
          </select>

         <input type="button" name="ViewReport" value="View" class="bnotes" onclick="GetInventory();">

   </form>


   <script language="JavaScript">
       function GetInventory()
       {
         var InvForm = document.forms.InventoryList;
         var SelBranchVal = "";
         var x = 0;

         for (x=0;x<=InvForm.SelBranch.length;x++)
         {
            if (InvForm.SelBranch[x].selected)
            {
             //alert(InvForm.SelBranch[x].value);
             SelBranchVal = SelBranchVal + "," + InvForm.SelBranch[x].value;
            }
         }
         alert(SelBranchVal);
       }


  </script>

标签： javascript drop-down-menu multiple-select

4条回答

Evening l夕情丶

2楼-- · 2019-01-06 19:26

The for loop is getting one extra run. Change

for (x=0;x<=InvForm.SelBranch.length;x++)

for (x=0; x < InvForm.SelBranch.length; x++)

0人赞添加讨论(0) 举报

戒情不戒烟

3楼-- · 2019-01-06 19:26

Here i am posting the answer just for reference which may become useful.

<!DOCTYPE html>
<html>
<head>
<script>
function show()
{
     var InvForm = document.forms.form;
     var SelBranchVal = "";
     var x = 0;
     for (x=0;x<InvForm.kb.length;x++)
         {
            if(InvForm.kb[x].selected)
            {
             //alert(InvForm.kb[x].value);
             SelBranchVal = InvForm.kb[x].value + "," + SelBranchVal ;
            }
         }
         alert(SelBranchVal);
}
</script>
</head>
<body>
<form name="form">
<select name="kb" id="kb" onclick="show();" multiple>
<option value="India">India</option>
<option selected="selected" value="US">US</option>
<option value="UK">UK</option>
<option value="Japan">Japan</option>
</select>
<!--input type="submit" name="cmdShow" value="Customize Fields"
 onclick="show();" id="cmdShow" /-->
</form>
</body>
</html>

0人赞添加讨论(0) 举报

Fickle 薄情

4楼-- · 2019-01-06 19:26

Take a look at HTMLSelectElement.selectedOptions.

HTML

<select name="north-america" multiple>
  <option valud="ca" selected>Canada</a>
  <option value="mx" selected>Mexico</a>
  <option value="us">USA</a>
</select>

JavaScript

var elem = document.querySelector("select");

console.log(elem.selectedOptions);
//=> HTMLCollection [<option value="ca">Canada</option>, <option value="mx">Mexico</option>]

This would also work on non-multiple <select> elements

Warning: Support for this selectedOptions seems pretty unknown at this point

0人赞添加讨论(0) 举报

傲

5楼-- · 2019-01-06 19:27

Also, change this:

    SelBranchVal = SelBranchVal + "," + InvForm.SelBranch[x].value;

    SelBranchVal = SelBranchVal + InvForm.SelBranch[x].value+ "," ;

The reason is that for the first time the variable SelBranchVal will be empty

0人赞添加讨论(0) 举报

Javascript Get Values from Multiple Select Option

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间