jquery click по первому повторяющемуся элементу

Допустим у вас есть несколько выпадающих списков (тег select), все они имеют одинаковый класс, например «.my-variation» и надо как то  получить выбранные данные с первого списка.

Пример структуры

<select class="my-variation">
<option value='111'></option>
<option value='222'></option>
<option value='333'></option>
</select>

<select class="my-variation">
<option value='x-111'></option>
<option value='x-222'></option>
<option value='x-333'></option>
</select>

<select class="my-variation">
<option value='s-111'></option>
<option value='s-222'></option>
<option value='s-333'></option>
</select>

Реализация скрипта onclick по первому элементу

А теперь сам код JavaScript по считыванию значения с первого селекта

<script>
( function( $ ) {
"use strict";

$('.my-variation:first').on('change', function(){
alert($(this).val());
})
}( jQuery ) );
</script>

Если вы заметили, к классу добавляется «:first«, который будет указывать что обрабатывать именно первый элемент. Таким образом можно обрабатывать и последний и четные или не четные элементы, или де указать номер нужного элемента.