Получить data атрибут у последнего select

13 марта 2021, 10:10

Помогите разобраться.

У меня есть форма с несколькими списками. Нужно получить data атрибут последнего select в div.

Пробовал вот так, но не работает.

$("#form-ingredient select:last-child").data('id')

Но если поставить вместо select input, тогда всё работает.

<div id="form-ingredient">
                    <select id="ingredient-1" class="form-control" data-id="1">
                        <option value="" disabled selected></option>
                        <option value="Колбаса">Колбаса</option>
                        <option value="Огурцы">Огурцы</option>
                    </select>
                </div>
<select id="ingredient-2" class="form-control" data-id="2">
                        <option value="" disabled selected></option>
                        <option value="Колбаса">Колбаса</option>
                        <option value="Огурцы">Огурцы</option>
                    </select>
                </div>

Answer 1

Раз ваш селект добавляется динамически, то его нужно найти:

$('.parent').find('select');

А ещё советую "выбирать" элементы через .eq(), вот пример:

let data = $('.selects').find('select').eq(-1).data('id'); 
  console.info(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="selects"> 
  <select data-id="1"></select> 
  <select data-id="22"></select> 
  <select data-id="333"></select> 
  <select data-id="4444"></select> 
  <select data-id="55555"></select> 
</div>

Answer 2

console.log( $("#test_div select:last-child").data('id') ); // берём внутри div последний селект

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
<div id="test_div"> 
  <select id="test_select" data-id="1"> 
    <option>1 option</option> 
  </select> 
</div>

Answer 3

Вот так можно:

let select = [...document.querySelectorAll("#form-ingredient select")].pop(); 
let data = select && select.getAttribute("data-id"); 
console.log(data)

<div id="form-ingredient"> 
  <select id="ingredient-1" class="form-control" data-id="1"></select> 
  <select id="ingredient-2" class="form-control" data-id="2"></select> 
</div>

Или так:

let selects = document.querySelectorAll("#form-ingredient select"); 
let lastData = selects.length && selects[selects.length - 1].getAttribute("data-id") || undefined 
console.log(lastData)

<div id="form-ingredient"> 
  <select id="ingredient-1" class="form-control" data-id="1"></select> 
  <select id="ingredient-2" class="form-control" data-id="2"></select> 
</div>

ps: в тегах есть javascript по этому без жуквери

Answer 4

Получилось. Спасибо. Ниже код с решением.

<div id="form-ingredient">
<select id="ingredient-1" class="form-control" data-id="1">
                    <option value="" disabled selected></option>
                    <option value="Колбаса">Колбаса</option>
                    <option value="Огурцы">Огурцы</option>
                </select>
                <select id="ingredient-2" class="form-control" data-id="2">
                    <option value="" disabled selected></option>
                    <option value="Колбаса">Колбаса</option>
                    <option value="Огурцы">Огурцы</option>
                </select>
</div>

$("#form-ingredient select").eq(-1).data('id')