javascript - 从最近选定的下拉选项中获取文本，并单击按钮上的类

Question

我有很多下拉菜单，当我单击按钮时，我希望它查找所选的选择选项并提醒我它所说的文本，例如“葡萄”。

它必须使用.closest，尝试了很多变体但似乎找不到它......

<select name="div0" class="dropdowns">
  <option value="orange">orange</option>
  <option value="apple">apple</option>
  <option value="grape">grape</option>
  <option value="peas">peas</option>
</select>

<input type="button" name="mybutton" value="Edit Row">

<select name="div1" class="dropdowns">
  <option value="orange">orange</option>
  <option value="apple">apple</option>
  <option value="grape">grape</option>
  <option value="peas">peas</option>
</select>

<input type="button" name="mybutton" value="Edit Row" class="editrowbutton">

JQUERY (Nearest I can get)
$(document).on('click', '.editrowbutton', function() {

     var thetext =  $(this).closest('select').find('option:selected').text();

    alert(thetext);
});

Answer 1

您在示例中的按钮上缺少 editrowbutton 类。

使用.prev从目标获取前一个元素。

$(document).on('click', '.editrowbutton', function() {
    var thetext =  $(this).prev().find('option:selected').text();
    alert(thetext);
});

http://jsfiddle.net/SeanWessell/wt00c2wu/

.closest 在树中查找父级。由于选择不是父项，因此您不会返回任何内容。

如果您想搜索同级，也可以使用 prev('selector') 或 next('selector')。

https://api.jquery.com/category/traversing/tree-traversal/