how to iterate through multiple select options with jquery

Question

I was just wondering if it\'s possible to go through multiple select options and get their values and text(if one is selected get the value and text, if 2 is selected get both o

Answer 1

for optgroups...

$("select[id^='desu']").children('optgroup').children('option:selected').each( 
    function(id, element) {
        document.write(element.title);
    }
);

Answer 2

https://jsfiddle.net/kmgoddard/Lfkvm3ar/4/

$("#mybutton").click(function(){
list = new Array();
$('select > option:selected').each(function() {

  list.push($(this).val());

});
 alert(list.toString());
});

Answer 3

This will alert all the selected options' text and values (for all selects on the page):

$('select > option:selected').each(function() {
    alert($(this).text() + ' ' + $(this).val());
});

See Core/each and Selectors/selected:

http://docs.jquery.com/Core/each

http://docs.jquery.com/Selectors/selected

Answer 4

//Another option

var selected = [];

$('select :has(:selected)').each( function(){

    var $this = $(this);
    selected.push( { text: $this.text(), value: $this.val() );

});

return selected;

Answer 5

This function will return an array of text/value pairs for the selects matching the given class.

function getSelects(klass) {
    var selected = [];
    $('select.' + klass).children('option:selected').each( function() {
        var $this = $(this);
        selected.push( { text: $this.text(), value: $this.val() } );
    });
    return selected;
}

Answer 6

If all of your select boxes start with a similar id ("select_1", "select_2", "select_3", etc), you can just do:

var arr = [];
$("select[id^='select_']").children('option:selected').each(function(){
  //you will do this once for every selected item...
}

This allows you to loop through only specific select boxes, in case you have multiple groupings.