JavaScript
Article
By Sam Deering

jQuery Loop Select Options

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

--ADVERTISEMENT--

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;
}
Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?