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

Question

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

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

例如

<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

首先，将您的 JS 移出标记。这只是一个好习惯：

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

然后，指定要传递的select（被点击的那个）：

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 2

您需要做的就是传递要在函数中更改的 select：您的 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 3

我相信你想要 $(this).find(':selected').val(); 而不是 $('select').val()，这将从正在更改的下拉菜单中获取选定的选项。

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

Multiple dropdown inputs on same page function

ajax

jquery

html-select