Javascript Show Multiple select option value

Question

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);}

    }
}

The select's ID is selectOptions but you repeatedly refer to it via slectOptions — j08691
– j08691, Commented Dec 27, 2016 at 17:11

Serg Chernata · Accepted Answer · 2016-12-27 17:14:33Z

1

Just use

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

console.log(select.selectedOptions);

answered Dec 27, 2016 at 17:14

Serg Chernata

12.4k6 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav C Balan · Accepted Answer · 2016-12-27 17:35:27Z

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 · Accepted Answer · 2017-05-23 11:21:42Z

<!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>

Collectives™ on Stack Overflow

Javascript Show Multiple select option value

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related