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' />

Nick Craver · Accepted Answer · 2014-03-01T12:00:30.187

5

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

edited Mar 01 '14 at 12:00

answered Oct 28 '10 at 10:33

Nick Craver

623,446
136
1,297
1,155

@Nick Craver - i want to leverage the class name as what if i stick something after the dropdown and before the button in the future. is there a more future-proof solution – leora Oct 28 '10 at 10:34
@ooo - updated with a slightly more future-proof way to do this, searching all previous siblings until `.addToList` is found – Nick Craver Oct 28 '10 at 10:39
@Nick Craver - at those supposed to be commas or semicolons at the end of the first and second lines ?? – leora Oct 28 '10 at 10:40
@ooo - commas, using a single `var`, you could do semicolons, and a `var` on each line as well. – Nick Craver Oct 28 '10 at 10:44
@Nick Craver - ah .. thanks, didn't realize this (i apologize for by being naive and questioning your correctness :) ) – leora Oct 28 '10 at 10:57
@ooo - there are no stupid questions!, well there *are*, but that wasn't one :) – Nick Craver Oct 28 '10 at 10:59

score 1 · Answer 2 · edited Mar 01 '14 at 05:25

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.

edited Mar 01 '14 at 05:25

coreyavis

87
1
7

answered Oct 28 '10 at 10:34

lonesomeday

233,373
50
316
318

get previous selected dropdown item

2 Answers2

Related