CODEWITHSUNDEEP
javascripthtmlcomboboxhtml-select
R J.
R J.

Reputation: 1542

how to get multiple selected values and items from listbox using javascript

    <!DOCTYPE html>
    <html>
    <script>
    function getValue()
    {
      var x = document.getElementById("sel");
      for (var i = 0; i < x.options.length; i++) {
          if (x.options[i].selected == true) {
              alert(x.options[i].selected);
          }
      }
    }
    </script>
    </head>
    <body>
    <select multiple="multiple" id="sel">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <input type="button" value="Get Value" onclick="getValue()"/>
    </body>
    </html>

This is my code. How do I get all the selected values from a listbox using JavaScript? The above code is showing true for all the selected values.

Upvotes: 18

Views: 84952

Answers (7)

3627_Parthik Jadav
3627_Parthik Jadav

Reputation: 1

your question is very simple replace this function with your old function

function getValue() {
        var x = document.getElementById("sel");
        for (var i = 0; i < x.options.length; i++) {
            if (x.options[i].selected == true) {
                alert(x.options[i].value);
            }
        }

Upvotes: 0

Richard Mneyan
Richard Mneyan

Reputation: 692

var obj = document.querySelectorAll('#sel option:checked');
var result = Object.keys(obj).map((key) => [obj[key].value, obj[key].text]);
alert(result);

The above is jQuery solution, in case somebody like me searches for javascript solution but decides to go with jQuery.

Upvotes: -1

nothingisnecessary
nothingisnecessary

Reputation: 6253

In modern browsers that support ECMAScript 2015 you can use

let selectedValues = Array.from(multiSelectElement.options).filter(o=>o.selected).map(o=>o.value)

or (using the spread operator)

let selectedValues = [...multiSelectElement.options].filter(o=>o.selected).map(o=>o.value)

For antique browsers like Internet Explorer and for extreme backwards compatibility you can still do it the long way:

var selectedValues = [];
for (var i = 0; i < multiSelectElement.options.length; ++i) {
    var option = multiSelectElement.options[i];
    if (option.selected) {
        selectedValues.push(option.value);
    }
}

where multiSelectElement is a reference to the select element (use document.getElementById("sel") or whatever)

Reference: Most efficient way to convert an HTMLCollection to an Array

Full example:

function getValues() {
  let multiSelectElement = document.getElementById("sel");
  let selectedValues = Array.from(multiSelectElement.options).filter(o => o.selected).map(o => o.value);
  console.log(selectedValues);
}
<!DOCTYPE html>
<html>
<body>
  <p>Windows desktop browsers: Use CTRL+Click or SHIFT+Click to select multiple options
  </p>
  <select multiple id="sel">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <input type="button" value="Get Values" onclick="getValues()" />
</body>
</html>

Upvotes: 0

Pankaj Chauhan
Pankaj Chauhan

Reputation: 1715

Solution with the same example

    <!DOCTYPE html>
    <html>
    <script>
    function getValue()
    {
        var x = document.getElementById("sel");
        for (var i = 0; i < x.options.length; i++) {
            if (x.options[i].selected == true) {
                alert(x.options[i].value);
            }
        }
    }
    </script>
    </head>
    <body>
    <select multiple="multiple" id="sel">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <input type="button" value="Get Value" onclick="getValue()"/>
    </body>
    </html>

Upvotes: 0

Rm558
Rm558

Reputation: 5002

use selectedOptions 

for (var i = 0; i < x.selectedOptions.length; i++) {
    alert(x.selectedOptions[i].value);
}

Upvotes: 3

Programming Guy
Programming Guy

Reputation: 7461

Replace

  if(x.options[i].selected ==true){
      alert(x.options[i].selected);
  }

with

  if(x.options[i].selected){
      alert(x.options[i].value);
  }

Upvotes: 18

Konstantin Dinev
Konstantin Dinev

Reputation: 34915

I suggest that you do it using jQuery like this:

var selected = $('#sel option:selected');

If you prefer not to use jQuery then disregard this answer and refer to the other ones.

Upvotes: 6

Related Questions