jquery - 同一页面上的多个下拉输入功能

Question

我试图在下拉选择输入上传递带有一些参数的网址，我正在使用 onchange 事件调用函数。

我遇到的问题是同一页面中有多个下拉菜单，每个下拉菜单都使用一个下拉菜单。当我选择一个选项时，即使选择了任何选择，也只会传递第一个选择的值。

例如

<tr><td>
<select onchange="updateStatus();">
    <option value="changed&amp;id=771">Change</option>
    <option value="posted&amp;id=771">Posted</option>
</select>
</td></tr>

<tr><td>
<select onchange="updateStatus();">
    <option value="changed&amp;id=750">Change</option>
    <option value="posted&amp;id=750">Posted</option>
</select>
</td></tr>

和 Jquery 函数:

function updateStatus() {
$.ajax({
    type: 'GET', 
    url: 'print.php',
    data: {stat: $('select').val()},
    success: function (data) {
        alert('done');
    }
})
}

我可以在控制台中看到数据正在传递，但始终是第一个值。

我需要更改什么才能使其成为相应的值而不总是第一个值？提前致谢。

Answer 1

您需要做的就是传递您要在函数中更改的选择:你的 html 应该像这样改变:

function updateStatus(changedSelect) {
console.log($(changedSelect).val());
$.ajax({
    type: 'GET', 
    url: 'print.php',
    data: {stat: $(changedSelect).val()},
    success: function (data) {
        alert('done');
    }
})
}

<!-- And, your jquery should change like this: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr><td>
<select onchange="updateStatus(this);">
    <option value="changed&amp;id=771">Change</option>
    <option value="posted&amp;id=771">Posted</option>
</select>
</td></tr>

<tr><td>
<select onchange="updateStatus(this);">
    <option value="changed&amp;id=750">Change</option>
    <option value="posted&amp;id=750">Posted</option>
</select>
</td></tr>