Home I made multiple selection on the dropdown but in Javascript alert, showing 1 value only

Questions

I made multiple selection on the dropdown but in Javascript alert, showing 1 value only

November 14, 2022

I add multiple on my dropdown list. But, when I check the values via Javascript with alert, it just showing the first one that I selected.

<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID :</label>
           <div class="col-sm-4">
            <p class="form-control-static" style="margin-top: -6px;">
                
                <select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple>
                <option value="" selected > Select Quantity</option>
                
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                
              </select>
            </p>
          </div>

Below is Javascript.
var affectedwaferid = document.translot.affectedwaferid.value;

>Solution :

As I posted in the comment,in order to get the multiple selected values, you need to use selectedOptions instead

function showSelected(){
  var options = document.getElementById('affectedwaferid').selectedOptions;
  var values = Array.from(options).map(({ value }) => value);
  document.getElementById("selected-result").innerHTML = values; 
}

<label class="control-label col-sm-4" for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID :
  <span id="selected-result"></span>
</label>
<div class="col-sm-4">
  <p class="form-control-static" style="margin-top: -6px;">

      <select class="form-control" id="affectedwaferid" name="affectedwaferid" multiple onchange="showSelected()">
      <option value="" selected > Select Quantity</option>

      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>

    </select>
  </p>
</div>