Question

这部分有问题。我有一个选择填充了asp.net mvc和另外2个由jquery填充的空选择

<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>

因此，基于第一个选择它填充sencond，基于第二个它填充第三个。第一个填充正确，第二个填充正确，第三个填充文档就绪。

   $(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

首先尝试遵循此Don't repeat yourself，这是简单的算法：

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也会更改。

Jquery附加选项以选择并获取所选值

2 个答案: