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

Question

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

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

e.g。

<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>

Answer 2

首先，将您的JS移出标记。这只是一个很好的做法：

$('select').change(function() {
    updateStatus();
});

然后，指定要传递的选择（单击的选项）：

updateStatus($(this)); // pass the jQuery element object

function updateStatus(el) { // and receive it as 'el' (or whatever)
    $.ajax({
        type: 'GET', 
        url: 'print.php',
        data: {stat: el.val()}, // use it here
        success: function (data) {
            alert('done');
        }
    });
}

Answer 3

我相信您需要$(this).find(':selected').val();而不是$('select').val()，这将从更改下拉菜单中获取所选选项。