CODEWITHSUNDEEP
jqueryhtml
Andy
Andy

Reputation: 5395

Retrieve the value of closest select option to a button

When the user clicks the 'Confirm' button I want to get the <option value> of the select element above the button.

I'm using jquery 3.2.1 and thought I could target this with .closest, but this logs undefined.

If I change the selector from .confirm-btn to .action-options it will log /clone/update/12/MERGE for all buttons pressed. So it's not reading anything except the first set of select values.

I've based this on this answer but can't see what else I can target.

Please can someone help?

$('body').on('click', '.confirm-btn', function(e) {
  e.preventDefault();

  var x = $('.confirm-btn').closest('select').find(':selected').val();
  console.log(x);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control action-options">
  <option value="/clone/update/12/MERGE">Merge</option>
  <option value="/clone/update/12/REPLACE">Replace</option>
  <option value="/clone/update/12/REJECT">Reject</option>
</select>
<button class="btn btn-primary confirm-btn">Confirm</button>

<select class="form-control action-options">
  <option value="/clone/update/11/MERGE">Merge</option>
  <option value="/clone/update/11/REPLACE">Replace</option>
  <option value="/clone/update/11/REJECT">Reject</option>
</select>
<button class="btn btn-primary confirm-btn">Confirm</button>

<select class="form-control action-options">
  <option value="/clone/update/10/MERGE">Merge</option>
  <option value="/clone/update/10/REPLACE">Replace</option>
  <option value="/clone/update/10/REJECT">Reject</option>
</select>
<button class="btn btn-primary confirm-btn">Confirm</button>

Upvotes: 1

Views: 76

Answers (2)

Abhishek Tewari
Abhishek Tewari

Reputation: 425

For dynamically created and injected elements, you need to look into the document. Use below code:

$(document).on('click', '.confirm-btn', function() {    
  var x = $(this).prev('select').val();
  //rest of your code goes here..
});

Upvotes: -1

Rory McCrossan
Rory McCrossan

Reputation: 337626

There's two main issues here. Firstly closest() is used to find a parent element. The select is a sibling of the button, so you need to use prev() instead in this case.

Secondly, you need to select the button which raised the event in order to traverse the DOM from that specific element. To do that use the this keyword in the selector. Your current logic is selecting all the .confirm-btn elements, which will result in only the first instance being used in the prev() call.

Also note that find(':selected') is redundant; you can just call val() on the select directly.

$('body').on('click', '.confirm-btn', function(e) {
  e.preventDefault();

  var x = $(this).prev('select').val();
  console.log(x);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control action-options">
  <option value="/clone/update/12/MERGE">Merge</option>
  <option value="/clone/update/12/REPLACE">Replace</option>
  <option value="/clone/update/12/REJECT">Reject</option>
</select>
<button class="btn btn-primary confirm-btn">Confirm</button>

<select class="form-control action-options">
  <option value="/clone/update/11/MERGE">Merge</option>
  <option value="/clone/update/11/REPLACE">Replace</option>
  <option value="/clone/update/11/REJECT">Reject</option>
</select>
<button class="btn btn-primary confirm-btn">Confirm</button>

<select class="form-control action-options">
  <option value="/clone/update/10/MERGE">Merge</option>
  <option value="/clone/update/10/REPLACE">Replace</option>
  <option value="/clone/update/10/REJECT">Reject</option>
</select>
<button class="btn btn-primary confirm-btn">Confirm</button>

Upvotes: 2

Related Questions