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

Question

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;

[how-to-get-all-selected-values-of-a-multiple-select-box](https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box) migtht be helpful to you — flyingfox, Nov 14 '22 at 02:26

flyingfox · Accepted Answer · 2022-11-14T03:10:57.543

0

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 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="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>

edited Nov 14 '22 at 03:10

answered Nov 14 '22 at 02:31

flyingfox

13,414
3
24
39

When I try to alert the value, it shows [object HTMLSelectElement] in alert box. may I know why? – Oliver Queen Nov 14 '22 at 02:51
@OliverQueen can you add the alert code?it might be you are alert an object not a pure value – flyingfox Nov 14 '22 at 02:57
I add alert (options) to check the values. – Oliver Queen Nov 14 '22 at 02:59
@OliverQueen you need to use `alert(values)` instead of `alert(options)` – flyingfox Nov 14 '22 at 03:01
it now shows Blank. – Oliver Queen Nov 14 '22 at 03:09
@OliverQueen,see my updated answer – flyingfox Nov 14 '22 at 03:11
Tysm for ur solution – Oliver Queen Nov 14 '22 at 03:29

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

1 Answers1