как получить значение select если их много?

Question

У меня есть два одинаковых блока. Как мне получить значение из Селекта и передать его в кнопке в data-sel="" ?

<div class="pricevoda-item">
        <h3>Вода “Артезианская” 19 л.</h3>
        <div class="pricevoda-col">
            <p>Количество:</p>
            <select class="pricevoda-sel">
                            <option data-display="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
            </select>
        </div>
        <a href="#" data-sel="" class="btn">Заказать</a>
</div>

<div class="pricevoda-item">
        <h3>Вода “Артезианская” 19 л.</h3>
        <div class="pricevoda-col">
            <p>Количество:</p>
            <select class="pricevoda-sel">
                            <option data-display="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
            </select>
        </div>
        <a href="#" data-sel="" class="btn">Заказать</a>
</div>

У меня получается получить значение только первого селекта

$(".btn").on("click", () => {
    alert($('.pricevoda-sel').val());
})

Нажимая на кнопку второго блока, как получить значение селекта именно этого блока? игрался с this но что-то ничего не получается

Answer 1

Чтобы this работал так, как Вы ожидаете, нужно использовать function вместо стрелочной функции:

$(".btn").on("click", function() {
  alert($(this).prev('.pricevoda-col').find('.pricevoda-sel').val());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricevoda-item">
  <h3>Вода “Артезианская” 19 л.</h3>
  <div class="pricevoda-col">
    <p>Количество:</p>
    <select class="pricevoda-sel">
      <option data-display="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
  <a href="#" data-sel="" class="btn">Заказать</a>
</div>

<div class="pricevoda-item">
  <h3>Вода “Артезианская” 19 л.</h3>
  <div class="pricevoda-col">
    <p>Количество:</p>
    <select class="pricevoda-sel">
      <option data-display="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
  <a href="#" data-sel="" class="btn">Заказать</a>
</div>

БЛОГ НА HUSL

как получить значение select если их много?

Ответы (1 шт):