Jquery 追加选项以选择和获取所选值

Jquery append option to select and get the selected value

本文关键字：获取 选择 追加 选项 Jquery      更新时间：2023-09-26

这部分有问题。我有一个填充了 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>
因此，基于第一个选择，它填充

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);
            });
        }
    });
}

加载页面后，如果我选择第二个，它会正确更改第三个，但如果更改第一个，它只会更改第二个。我需要的是加载时填充第二个和第三个，然后在更改第一个时重新填充第二个和第三个，并在更改第二个时重新填充第三个。

我可以看到它没有在任何阶段分配选定的，所以我不确定是否需要分配它。

希望我解释得很好。

任何帮助将不胜感激。

首先尝试遵循这个 不要重复自己，这是简单的算法：

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

祝你好运！

由于您使用的是 jQuery，请尝试使用 .on('chang', function(){...) 事件处理程序。因为您正在更改 DOM，并且 on() 方法可以检测到更改事件，即使在文档准备就绪后更改了 DOM。

相关文章：