單擊按鈕即可從最接近的所選下拉選項中獲取文本

Question

我有很多下拉菜單，當我單擊按鈕時，我希望它查找所選的選擇選項，並提醒我說“ grape”的文字。

它必須使用.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/

Answer 2

您也可以使用data- *屬性，以防止DOM位置錯誤。

 $(function(){ $(document).on("click",'.editrowbutton',function(){ var target = $(this).data("select"); alert($('select[name='+target+'] option:selected').text()) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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" data-select="div0" class="editrowbutton" 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" data-select="div1" class="editrowbutton" value="Edit Row">