从下拉列表中选择项目时的 Firebug 行为

Question

我有一个下拉列表，当用户从中选择一个项目时，它会用相关数据呈现部分。 但是，如果用户更改了 ddl 的选择，则应将先前呈现的内容替换为当前内容。

以下是代码

脚本

<script>
        var prev;
        $(document).on('focus', '.class03', function () {
            prev = $(this).val();
        }).on('change', '.class03', function () {
            if (prev != "") {
                $('.cmpCls').last().remove();
                alert(prev);
                $.ajax({
                    url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
                    type: "GET",
                    data: { DesignCdId: $(this).val() }, // pass the selected value
                    success: function (data) {
                        $('#cmpDts').append(data);
                    }
                }); 
            }
            else {
                $.ajax({
                    url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
                    type: "GET",
                    data: { DesignCdId: $(this).val() }, // pass the selected value
                    success: function (data) {
                        $('#cmpDts').append(data);
                    }
                });
            }
        });
        </script>

Div 附加渲染的局部视图

<div id="cmpDts">

</div>

这里让我感到困惑的是，当我使用 firebug 时，当用户更改下拉列表的选择时，脚本可以很好地替换 'cmpDts' div 中先前呈现的内容。

但是当我在没有萤火虫的情况下运行应用程序并且当用户更改 ddl 的选择时，而不是替换 div 中以前的内容，它会继续添加到 div 而不删除以前的内容。

我认为没有萤火虫，每次涉及到else部分，无论prev是否有价值。 我可以认出它，因为这里没有萤火虫就不会触发alert 。 我对这种行为感到困惑。 所有帮助表示赞赏。 谢谢！

编辑：我是如何工作的（我知道这可能不是正确的方法，但由于时间有限，我不得不坚持下去）

<script>
        var prev;
        $(document).on('focus', '.class03', function () {
            prev = $(this).val();
        }).on('change', '.class03', function () {
            if (prev != "") {
                //$('.cmpCls').last().remove();
                alert("If");
                $.ajax({
                    url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
                    type: "GET",
                    data: { DesignCdId: $(this).val() }, // pass the selected value
                    success: function (data) {
                        $('.cmpCls').last().replaceWith(data);
                    }
                }); 
            }
            else {
                alert("Else");
                $.ajax({
                    url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
                    type: "GET",
                    data: { DesignCdId: $(this).val() }, // pass the selected value
                    success: function (data) {
                        $(".class03 option[value='']").remove() ;
                        $('#cmpDts').append(data);
                    }
                });
            }
        });
        </script>

Answer 1

首先，您需要使用以下命令等待文档准备就绪：

$(document).ready(function(){

});

现在，您要检查 .class03 中的某些内容是否发生了变化。

$(document).ready(function(){
    var prev;
    $(".class03").focus(function(){ prev = $(this).val(); });

    $(".class03").change(function(){
        if (prev !== "") { $('.cmpCls').last().remove(); }
            alert(prev);
            $.ajax({
                url: '@Url.Action("ComponentDts", "InquiryOrder")', // dont hard code your url's
                type: "GET",
                data: { DesignCdId: $(this).val() }, // pass the selected value
                success: function (data) {
                    $('#cmpDts').append(data);
                }
            }); 
    });
});

尝试这个。

编辑：删除双重代码