使用jquery“这个”；从下拉列表中返回选定的选项，但它返回页面上的所有下拉列表

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，您在选项列表末尾之前有重复的结束标记。