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。

但是当我在没有firebug的情况下运行应用程序并且当用户更改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);
                }
            }); 
    });
});

试试这个。

编辑：删除了双重代码

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

1 个答案: