Получить значение ближайшей опции выбора для кнопки

Question

Когда пользователь нажимает кнопку «Подтвердить», я хочу получить <option value> элемента select над кнопкой.

Я использую jquery 3.2.1 и думал, что могу нацелить это с помощью .closest, но при этом регистрируется undefined.

Если я переключаю селектор с .confirm-btn на .action-options, он регистрирует /clone/update/12/MERGE для всех нажатых кнопок. Поэтому он не читает ничего, кроме первого набора значений выбора.

Я основал это на этом ответе , но не вижу, на что еще я могу ориентироваться.

Пожалуйста, кто-нибудь может помочь?

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

Answer 1

Здесь есть две основные проблемы. Во-первых, closest() используется для поиска родительского элемента. select - это брат или сестра из button, поэтому в этом случае вам нужно использовать prev().

Во-вторых, вам нужно выбрать button, который поднялсобытие для того, чтобы пройти DOM от этого конкретного элемента. Для этого используйте ключевое слово this в селекторе. Ваша текущая логика выбирает все элементы .confirm-btn, что приведет к тому, что в вызове prev() будет использоваться только первый экземпляр.

Также обратите внимание, что find(':selected') является избыточным;Вы можете просто позвонить val() на select напрямую.

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

Answer 2

Для динамически создаваемых и внедряемых элементов вам нужно заглянуть в документ. Используйте код ниже:

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