jQuery Loop Select Options

Sam Deering
Tweet

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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: jQuery .val() works 2 ways on select inputs | jQuery4u

  • bill Melendez

    sam: If I need to use 4 different drop boxes and the value of each dropbox selection which when combined would allow me to equate a textbox output –how would I do that? I select from drop box 1, then from dropbox 2, then from dropbox 3, then from dropbox 4 and the combined selections (if drpbx1selected value = 1, and drpbx2selected value=3, and…) allows me to assign a text output to it?

  • Bill Melendez

    SAM: Similar. Let’s say that the first drop box selection is a text selection :”Drive”‘ and the second drop box selection is a text number: “8”, the third drop box is “275mm” while the fourth is ‘24.5″‘. I select from drop box 1, then from drop box 2, then from drop box 3, then from drop box 4 and the combined selections (if drop box1selected value = 1, and drop box2 selected value=3, and…) allows me to assign a text output to it? I set each drop down list in a form with a Function Option1, 2, 3, 4 and a variable of sel1, 2, 3,and 4 to indicate the selected 4 possible values. e27 and e26 are box id and each has two selections. the other drop boxes, e23 and e21 have four and three selections.

    function setOption1(chosen) {
    if (chosen == “1”) {
    var e1 = document.getElementById(“e27″);
    var sel1 = e1.options[e1.selectedIndex].value; }
    else if (chosen == “2”) {
    var e2 = document.getElementById(“e27″);
    var sel2 = e2.options[e2.selectedIndex].value; }}

    function setOption2(chosen) {
    if (chosen == “3”) {
    var e3 = document.getElementById(“e26″);
    var sel3 = e3.options[e2.selectedIndex].value;}
    else if (chosen == “4”) {
    var e4 = document.getElementById(“e26″);
    var sel4 = e4.options[e4.selectedIndex].value;}}

    I then used the selx variable of the functions to display the part number resulting from the 4 selected values. Here’s where I’m stuck –i don’t know what to use to be able to display the part number derived from the four values or if I’m even on the right track. There are 15 possible part numbers with 15 possible value selections (sel1 -sel15).

    function displaysel()
    if (sel1 == “1” , sel3 == “3”, sel7 == “7”, sel9 == “9”) { var partno = “600-618″;}
    else if (sel1 == “1”, sel3 == “3”, sel7 == “7”, sel10 == “10”) {partno = “600-638″;}
    else if (sel1 == “1”, sel3 == “3”, sel7 == “7”, sel10 == “11”) {partno = “600-658″;}

    Anything you can suggest would help me immensely. The partno is the output to console that I need.