CODEWITHSUNDEEP
javascriptjqueryhtml
Mikeys4u
Mikeys4u

Reputation: 1552

Get text from closest selected dropdown option with class on button click

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

Upvotes: 0

Views: 1579

Answers (2)

Sean Wessell
Sean Wessell

Reputation: 3510

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/

Upvotes: 1

Vanojx1
Vanojx1

Reputation: 5574

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

Upvotes: 0

Related Questions