Skip to main content

jQuery Loop Select Options

By Sam Deering
JavaScript
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;
}

Tags

jQuery

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Integromat Tower Ad