web-dev-qa-db-fra.com

Javascript Récupère les valeurs de la boîte d'options de sélection multiple

Celui-ci me rend fou. Ça doit être quelque chose de simple et de stupide que je néglige. J'ai une boîte de sélection multiple dans un formulaire. J'essaie simplement d'obtenir les valeurs sélectionnées. Dans ma boucle, si j'utilise alert, je n'ai aucun problème. Dès que j'essaye de concaténer les valeurs, je reçois l'erreur "SelBranch [...]. Selected" est nul ou pas un objet

      <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>
javascriptdrop-down-menumultiple-select
21
Soren

Ici, je poste la réponse juste pour référence qui peut devenir utile.

<!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>
3
Kaushal Bhatt

Jetez un œil à 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>]

Cela fonctionnerait également sur les non -multiple<select> éléments

Avertissement: La prise en charge de ce selectedOptions semble assez inconnue à ce stade

3
maček

Modifiez également ceci:

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

à

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

La raison en est que pour la première fois la variable SelBranchVal sera vide

2
web4live