javascript - 级联下拉菜单: detecting a change made by code

Question

在创建级联下拉菜单时，我遇到了问题。现在，第一个下拉列表有效:当我从第一个下拉列表中选择某些内容时，第二个下拉列表会相应更改。但是，当第二个下拉列表发生变化时，我需要触发另一个函数。我可以创建另一个 .change 函数，该函数在用户更改第二个下拉列表中的值时触发。但是，问题是未检测到用户选择第一个下拉列表触发的更改。换句话说，代码所做的更改不会被检测到。

如何检测两种类型的更改:代码所做的更改和用户所做的更改？或者，如何从第二个下拉列表中获取第一项，以便将其传递给两个 .change 函数共享的通用函数。

这是我用来检测第一个下拉列表中的更改并填充第二个下拉列表的 JavaScript 函数。

    $(function () {

    $('#Country_ID').change(function () {
        debugger;
        var id = $("#Country_ID :selected").val();
        if (id != "") {

            $.ajax({

                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: '@Url.Action("CityList", "DropDown")',
                data: { "mCountry": id },
                dataType: "json",
                beforeSend: function () {
                    //alert(id);
                },
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, city) {
                        items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
                    });
                    $('#City_ID').html(items);

                },
                error: function (result) {

                    alert('Service call failed: ' + result.status + ' Type :' + result.statusText);
                }
            });
        }
        else {
            var items = '<option value="">Select</option>';
            $('#City_ID').html(items);
        }

        @*I think I need to get the first value of the second dropdown here. 
          Then, pass the value to a function shared by the second `.change` function*@
    });
});

    $(function () {

        $('#Second_Dropdown').change(function () {
            @*call common function, passing selected value 
        });
    });

我对 Javascript 很陌生，所以越详细越好。

Answer 1

动态选择后，调用第二个下拉列表的 .change() 函数。替换:

$('#City_ID').html(items)

与:

$('#City_ID').html(items).change();