Использование jquery 'this' для возврата выбранной опции из выпадающего списка, но возвращает все выпадающие списки на странице

Question

У меня есть страница со списком почти идентичных полей выбора. Я хочу, чтобы моя функция возвращала выбранное значение только в поле, которое было изменено; прямо сейчас он возвращает выбранное значение для всех полей на странице. Я думаю, что я как-то неправильно использую «это», но не могу понять, как.

<ul class="edgetoedge" id="finisherlist">
<form method="post">
<li class="entry">
<span class="finishingposition">1</span>
<span class="runnerblock">
<select placeholder="Finisher name" name="finisher" 
    class="finisherchoice" onChange="saveFinishOrder();">
<option value="0" selected="selected" data-skip="1">Select runner</option>
<option value="1">Bob</option>
<option value="2">Peter</option>
</select></span>
</li>
<li class="entry">
<span class="finishingposition">2</span>
<span class="runnerblock">
<select placeholder="Finisher name" name="finisher" class="finisherchoice"     
    onChange="saveFinishOrder();">
<option value="0" selected="selected" data-skip="1">Select runner</option>
<option value="1">Bob</option>
<option value="2">Peter</option>
</select></span>
</li>
</form>
</ul>

А мой отдельный JavaScript выглядит так:

function saveFinishOrder() {
alert($(this +'option:selected').text());
}

Когда я изменяю одно из раскрывающихся списков, я получаю предупреждение типа «PeterSelectRunner», то есть оно возвращает мне текущие выбранные значения всех раскрывающихся списков на странице. Я хочу получить значение только этого раскрывающегося списка, чтобы затем сохранить его в таблице.

РЕДАКТИРОВАТЬ удалил неуместные теги в приведенном выше примере кода.

Answer 1

onChange="saveFinishOrder(this);"

и

function saveFinishOrder(elem) {
    alert($(elem).val());
}

Answer 2

Попробуйте это:

function saveFinishOrder() {
  alert($(this).find('option:selected').text());
}

Кроме того, проверьте ваш HTML, у вас есть дубликаты закрывающих тегов и до конца списка опций.