如何确保第二个下拉列表仅从JQuery API调用中获取其选项？

Question

我有三个ASP.NET生成的下拉列表：

#FacilityID
#ShiftID
#LineID

当用户在#FacilityID中切换选项时，我需要拨打我的API，并为#ShiftID和#LineID提供新选项。

现在，我使用以下代码：

$(function() {
            $("#DefaultFacilityId").change(function() {
                var val = $(this).val();
                var subTypes = "";
                $("#DefaultShiftId").children('option:not(:first)').remove();
                $.getJSON("@Url.Action("GetFacilityShifts")",
                    { id: val },
                    function(data) {
                        $.each(data,
                            function(index, item) {
                                subTypes += "<option value='" + item.Id + "'>" + item.ShiftCode + "</option>"
                            });
                        $("#DefaultShiftId").append(subTypes);
                    });

                $("#DefaultLineId").children('option:not(:first)').remove();
                $.getJSON("@Url.Action("GetFacilityLines")",
                    { id: val },
                    function(data2) {
                        $.each(data2,
                            function(index, item) {
                                subTypes += "<option value='" + item.Id + "'>" + item.LineName + "</option>"
                            });
                        $("#DefaultLineId").append(subTypes);
                    });
            });
        });

我们在其他页面上使用此确切代码，但通常一次只使用一个（IE，更改#FacilityID下拉列表会更改#ShiftID中的值。看到这是一个特殊功能的特例，我想我会尽可能多地重用代码。

但是，我遇到了#ShiftID正常完成的结果，但是#LineID获取了#ShiftID及其自身结果的结果。

如何阻止#LineID下拉列表获取#ShiftID结果，为什么会发生这种情况？