Javascript Show Multiple select option value

Question

Javascript Show Multiple select option value

2.9k Views Asked by ffoss At 15 May 2025 at 07:44

I am trying to get (or show) values from Multiple Select using only Javascritpt. Let's say, the user can select multiple options from here, and when they click the 'Show Select' button they can see what are the values of these options. I took the idea about 'selected' attribute from here But, the code didn't work. Any help?

<select id ="selectOptions" name="cars" multiple>

  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>

</select>

<button onclick="myFunction()">Show Selects</button>

<script>

function myFunction()
{

  var numOfOptions = document.getElementById("slectOptions").options.length;
  var n=0;



 for (n=0; n<numOfOptions; n++)
    {



   // I tried to use a for loop that will go around from option 0 to 3, 
   //and through 'selected' attribute wanted to check the condition if the option is selected then only show the values
   // I still couldn't figure out if the loop is working at all

      if (document.getElementById("slectOptions")[n].selected)
  {
            var x =   document.getElementById("slectOptions").value;
            window.alert(x);}

    }
}

Original Q&A

There are 3 best solutions below

**Serg Chernata** · Answer 1

Serg Chernata On 27 December 2016 at 17:14

Just use

var select = document.getElementById("selectOptions");

console.log(select.selectedOptions);

**Pranav C Balan** · Answer 2

Iterate over the options and check checked property. Although there is a simple type in your selector where missing e in the string.

function myFunction() {
  var options = document.getElementById("selectOptions").options;
  for (var n = 0; n < options.length; n++) {
    if (options[n].selected) {
      console.log(options[n].value);
    }

  }
}

<select id="selectOptions" name="cars" multiple>

  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>

</select>

<button onclick="myFunction()">Show Selects</button>

Or use readonly selectedOptions property to get the collection of selected options.

function myFunction() {
  var options = document.getElementById("selectOptions").selectedOptions;
  for (var n = 0; n < options.length; n++) {
    console.log(options[n].value);
  }
}

<select id="selectOptions" name="cars" multiple>

  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>

</select>

<button onclick="myFunction()">Show Selects</button>

**Marion Rose** · Answer 3

<!DOCTYPE html>
<html>
<script>
    function eraseText() {document.getElementById("txtChoices").value = "";
}

    function SetMulti() {var txtChoices = document.getElementById("txtChoices"); txtChoices.value += document.getElementById("choiceNames").value;
}
</script>
</head>
<body>
    <input type="text" id="txtChoices" readonly="readonly"  placeholder="Multiple choice"/></br>

    "Variable" Choice dropdown:
    </br>
    <select multiple="" name="choiceNames" id="choiceNames">
    <option value="Long, ">Long, </option>
    <option value="Short, ">Short, </option>
    <option value="Red, ">Red, </option>
    <option value="Curly, ">Curly, </option>
    <option value="Straight, ">Straight, </option>
    </select>

    <button onclick="SetMulti()">Add</button>
    <button onclick="eraseText()">Reset</button>

</body>
</html>

Javascript Show Multiple select option value

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in MULTIPLE-SELECT

Trending Questions

Popular # Hahtags

Popular Questions