How to get multiple select box values using jQuery?

Viewed 475369

How to get multiple select box values using jQuery?

9 Answers

Just by one line-

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text);

Output: ["text1", "text2"]

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.value);

Output: ["value1", "value2"]

If you use .join()

var select_button_text = $('#SelectQButton option:selected')
                .toArray().map(item => item.text).join();

Output: text1,text2,text3

In case if you have multiple select boxes on a single page and they all have the same class which you can prefer in case of multiple rather than tracking id's:

$('.classname option:selected').map(function(){
    return this.value; // If you want value.
    // Or you could also do.
    return this.text; // If you want text of select boxes.
}).get(); // It will return an Array of selected values/texts.
Related