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

Question

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

Community · Accepted Answer · 2015-07-29 13:04:27Z

18

Replace

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

with

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

edited Jul 29, 2015 at 13:04

CommunityBot

11 silver badge

answered Oct 8, 2012 at 5:45

Programming Guy

7,47911 gold badges53 silver badges61 bronze badges

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

1 Comment

Oriol Over a year ago

It's useless to use if(x.options[i].selected==true) instead of if(x.options[i].selected), but it could make sense if(x.options[i].selected===true) or if(!!x.options[i].selected)

Konstantin Dinev · Accepted Answer · 2012-10-08 05:51:48Z

6

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.

edited Oct 8, 2012 at 5:51

answered Oct 8, 2012 at 5:45

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

3 Comments

Phil Over a year ago

Question asks for a JavaScript solution and is not tagged jQuery

Konstantin Dinev Over a year ago

@Phil Just making a suggestion, the user can disregard it if he doesn't use jQuery, but also it may present to him easy DOM access he may consider.

Oriol Over a year ago

From api.jquery.com/selected-selector: "Because :selected is a jQuery extension and not part of the CSS specification, queries using :selected cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :selected to select elements, first select the elements using a pure CSS selector, then use .filter(":selected")". Therefore var selected = $('#sel option').filter(':selected'); is better.

Rm558 · Accepted Answer · 2017-02-15 16:59:29Z

3

use selectedOptions

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

answered Feb 15, 2017 at 16:59

Rm558

5,0604 gold badges42 silver badges47 bronze badges

Comments

Dmitriy Popov · Accepted Answer · 2023-06-29 16:34:05Z

0

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>

edited Jun 29, 2023 at 16:34

Dmitriy Popov

2,3703 gold badges29 silver badges40 bronze badges

answered Apr 14, 2016 at 10:47

Pankaj Chauhan

1,75315 silver badges13 bronze badges

Comments

nothingisnecessary · Accepted Answer · 2023-12-01 16:04:14Z

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>

3627_Parthik Jadav · Accepted Answer · 2023-12-07 04:57:01Z

0

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

answered Dec 7, 2023 at 4:57

3627_Parthik Jadav

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Richard Mneyan · Accepted Answer · 2023-12-07 04:41:25Z

-1

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.

edited Dec 7, 2023 at 4:41

answered Jun 22, 2023 at 20:42

Richard Mneyan

6921 gold badge15 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

1 Comment

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related