jQuery Loop Select Options

Sam Deering
Share

Simple jQuery code snippet to loop select box options (drop down boxes) in a form to get the values and text from each option. Useful for manipulating values in form select boxes.

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

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

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