get previous selected dropdown item

Question

i have the following code where i have a dropdown list (with class="addToList" and followed by a button (Class="addtoButton"):

When i click on the button, i want to grab the current selected value and text from the previous dropdown list.

$(".addToPortalButton").live('click', function (e) {

// grab the previous dropdown list value and text here.

});

what is the easiest way to doing this using jquery.

Here is the html:

<select class="addToList" id="Teams" name="Teams">
     <option></option>
    <option value="49">Team 1</option>
    <option value="22">Team 2</option>
</select>
<input type='button' class="addToButton" value='Add to' />

<select class="addToList" id="Teams" name="Teams">
     <option></option>
    <option value="49">Team 1</option>
    <option value="22">Team 2</option>
</select>
<input type='button' class="addToButton" value='Add to' />

<select class="addToList" id="Teams" name="Teams">
     <option></option>
    <option value="49">Team 1</option>
    <option value="22">Team 2</option>
</select>
<input type='button' class="addToButton" value='Add to' />

Answer 1

You can do this with the following code:

$(".addToButton").on('click', function (e) {

    var $el = $(this).prev().find('option:selected');

});

You can then use $el.val() and $el.text() to get the value and text respectively.

Answer 2

You can use .prev() or .prevAll() to get the <select> before like this:

Edit: for newer versions of jQuery where .live() has been deprecated, the new .on() syntax is:

$(document).on('click', '.addToButton', function (e) {
  var sel = $(this).prevAll('.addToList:first'),
      val = sel.val(),
      text = sel.find(':selected').text();    
});

Older version:

$(".addToButton").live('click', function (e) {
  var sel = $(this).prevAll(".addToList:first"),
      val = sel.val(),
      text = sel.find(':selected').text();    
});