How do I create a list of the selected options from a dropdwon

Question

I am trying to loop through a multiple select dropdown list and add all of the selected options to a comma separated list.

My dropdown code is:

In my tag I am using the following, but think it can be simplified or improved:

var testnameID = $('#testnameID').val();
var testnameText;            
Array.from(document.querySelector("#testnameID").options).forEach(function(option_element) {
            let option_text = option_element.text;
            let is_option_selected = option_element.selected;

            if (is_option_selected===true){
                testnameText = testnameText + option_text +", ";
                console.log("TestnameText: "+testnameText);
                console.log("

");
            }
            
        });

I need to generate a variable, testnameText, which if the first three items were selected, would return a value of "Test number 1, Test number 2, Test number 3"

I'm getting myself in a muddle!

user_7461381 · Answer

You can try using Document.querySelectorAll() to target all the selected options like the following way:

Array.from(document.querySelectorAll("#testnameID option:checked")).forEach(function(option_element) {
  let option_text = option_element.text;

  var testnameText = option_text +", ";
  console.log("TestnameText: "+testnameText);
  console.log("

");
});

You can also try using Array.prototype.map() and Arrow function expressions which is more shorter.

The following example creates an array of the selected options:

var checkedOptions = Array.from(document.querySelectorAll("#testnameID option:checked"));
var res = checkedOptions.map(option_element => ("TestnameText: "+option_element.text));
console.log(res);

user_6174271 · Answer

In this case, jquery's each() can help. So getting selected options is pretty simple:

$('#testnameID :selected').each(function (index, el) {
    console.log("TestnameText: " + $(el).text());
});

user_1169519 · Answer

selectedOptions contains all the selected options of a select element. You can use it like this:

const select = document.querySelector('select');
select.addEventListener('change', e => {
  // Option texts as an array
  const texts = Array.from(e.target.selectedOptions).map(({text}) => text);
  // Option texts as a comma-separated string
  const textsStr = texts.join(', ');
  console.log(texts);
  console.log(textsStr);
});

This works outside of the event too, just refer the select element directly instead of e.target.

How do I create a list of the selected options from a dropdwon

3 Answers