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

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  for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID :</label>
           <div >
            <p  style="margin-top: -6px;">
                
                <select  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;

CodePudding user response：

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);
  alert(values)
  document.getElementById("selected-result").innerHTML = values; 
}

<label  for="affectedwaferid" style="margin-left: 1px;">Affected Wafer ID :
  <span id="selected-result"></span>
</label>
<div >
  <p  style="margin-top: -6px;">

      <select  id="affectedwaferid" name="affectedwaferid" multiple onchange="showSelected()">
      <option value="title" 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>