Question

在$(document).ready()中，我正在设置一个特定下拉列表中要选择的第一个元素。我还需要在下拉列表中触发更改功能，就像手动选择了该选项一样。如果触发更改，则会调用showTestsByPanel函数并显示与所选下拉选项关联的相应数据。

我正在执行以下操作，但它无助于触发更改功能：

$(document).ready(function () {
    $("#lbpanel option:first-child").attr('selected', 'selected');
    $('#lbpanel').trigger('change'); // <-- this is not triggering the change

    $('#lbpanel').change(function () {
        var $this = $(this);
        var parentId = $("#lbpanel").find("option:selected").val();
        $("#selectedTests tr").each(function () {
            showTestsByPanel(parentId, $(this));
        });
    });
});

我也尝试了$('#lbpanel').change()，但这并没有奏效。

如果有帮助：

整个事情都在模态对话框内。
这实际上是一个列表框，其中allowmultiple设置为false。

我做错了什么？

Answer 1

您正在尝试在创建处理程序之前触发change事件。这就是没有效果的原因。

在注册change()事件处理程序

之后调用change

$(document).ready(function () {
    $("#lbpanel option:first-child").attr('selected', true);
    $('#lbpanel').change(function () {
        var $this = $(this);
        var parentId = $("#lbpanel").find("option:selected").val();
        $("#selectedTests tr").each(function () {
            showTestsByPanel(parentId, $(this));
        });
    }).change(); //added change here
});

Answer 2

您需要在注册触发器处理程序后触发更改事件，当事件被触发时，它将仅调用已注册的处理程序。

$(document).ready(function () {
    $("#lbpanel option:first-child").attr('selected', 'selected');

    $('#lbpanel').change(function () {
        var $this = $(this);
        var parentId = $("#lbpanel").find("option:selected").val();
        $("#selectedTests tr").each(function () {
            showTestsByPanel(parentId, $(this));
        });
    }).trigger('change'); // need to trigger the event after the handler is added
});

无法在文档就绪中触发下拉元素的更改事件

2 个答案: