jQuery附加選項以選擇並獲取所選值

Question

這部分有麻煩。 我有一個用asp.net mvc填充的選擇和由jQuery填充的其他2個空選擇

<select id="Type" onchange="GetClassification(this.value);">
    @foreach (var item in Type)
    {
      <option value="@item.TypeID">@item.TypeName</option>
    }
</select>

<select id="Classification" onchange="GetDescription(this.value);">
</select>

<select id="Description" onchange="GetDescriptionTips(this.value);">
</select>

因此，根據第一個選擇填充第二個，基於第二個選擇填充第三個。 第一個填充正確，第二個填充正確，第三個沒有在准備好的文檔上填充。

   $(document).ready(function () {
      $(function () {
         var type = $("#Type option:selected").val();
         GetClassification(type);
      });
    });

    function GetClassification(typeID) {
        $.ajax({
            type: 'GET',
            url: '/types/Classification',
            data: { typeID: typeID },
            cache: false,
            success: function (data) {
                $('#Classification option').remove();
                $.each(data, function (index, val) {
                    var optionTag = $('<option></option>');
                    $(optionTag).val(val.ClassificationID).text(val.ClassificationName);
                    $('#Classification').append(optionTag);
                });
            }
        });
    var classification = $("#Classification option:selected").val();
    GetDescription(classification);
}

function GetDescription(classificationID) {
    $.ajax({
        type: 'GET',
        url: '/types/Description',
        data: { classificationID: classificationID },
        cache: false,
        success: function (data) {
            $('#Description option').remove();
            $.each(data, function (index, val) {
                var optionTag = $('<option></option>');
                $(optionTag).val(val.DescriptionID).text(val.DescriptionName);
                $('#Description').append(optionTag);
            });
        }
    });
}

加載頁面后，如果選擇第二個，則會更改第三個權利，但是如果更改第一個，則只會更改第二個權利。 我需要的是在加載時填充第二個和第三個，然后在更改第一個，重新填充第二個和第三個，並在更改第二個時重新填充第三個。

我可以看到它在任何階段都不會分配所選內容，因此我不確定是否需要分配它。

希望我能解釋得很好。

任何幫助將不勝感激。

Answer 1

首先，請嘗試遵循此操作。 不要重復自己 ，這是簡單的算法：

1.Choose all selects
2.Create only one ajax function and pass params like url, data, etc to it
3.In success function proccess your response from the server
4.find all next selects and clean them up or remove options as u wish

祝好運！

Answer 2

由於您使用的是jQuery，請嘗試使用.on('chang', function(){...)事件處理程序。 因為您正在更改DOM，所以on()方法可以檢測到更改事件，甚至在文檔准備就緒后DOM也已更改。