获取上一个选择的下拉项

Question

我有以下代码，其中有一个下拉列表（带有 class="addToList" ，后跟一个按钮（Class="addtoButton"）：

当我单击按钮，我想从上一个下拉列表中获取当前选定的值和文本，

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

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

});

使用 jquery 执行此操作的最简单方法：

这是

<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

您可以使用以下代码来执行此操作：

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

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

});

然后可以使用 $el.val() 和 $el.text() 分别获取值和文本。

Answer 2

您可以使用 .prev() 或 .prevAll() 获取之前的 ，如下所示：

编辑：对于较新版本的 jQuery，其中 .live() 已被弃用，新的​​ .on() 语法是：

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

旧版本：

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