单击按钮即可从最接近的所选下拉选项中获取文本

Question

I have many dropdowns, when I click the button I want it to look up the select option that is selected and alert me the text it says, like 'grape'.

It must use .closest, have tried many variations but cant seem to find it.....

<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

You are missing the class editrowbutton on your buttons in the example.

use .prev to get the previous element from target.

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

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

.closest looks up the tree at parents. Since the select is not a parent you will not return anything.

If you wanted to search the siblings you can use prev('selector') or next('selector') as well.

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

Answer 2

You can also use the data-* attribute, preventing DOM position mistakes.

 $(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">