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

标签 javascript jquery asp.net-mvc-5 firebug

我有一个下拉列表,当用户从中选择一个项目时,它会呈现带有相关数据的部分。但是,如果用户更改 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>

添加渲染的局部 View 的 Div

<div id="cmpDts">

</div>

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

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

我认为如果没有firebug,每次涉及到else部分时,无论prev是否有值。我可以认出它,因为如果没有 firebug,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>

最佳答案

您首先需要等待文档准备就绪,方法是:

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

试试这个。

编辑:删除双重代码

关于javascript - 从下拉列表中选择项目时的 Firebug 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33607041/

相关文章:

asp.net-mvc-5 - 将 mvcSitemap 与 ASP.NET MVC 5 结合使用

c# - 当在 Controller 构造时不知道存储库时,如何在 Controller 中注入(inject)存储库?

javascript - JQuery 对话框绑定(bind)事件到按钮

javascript - 如何判断脚本当前是否处于事件状态?

javascript - 如何为每个元素添加点击事件监听器?

javascript - 如何在向下滚动时缩小动画标题并在向上滚动时放大它?

php - MySQL 使用 PHP 更新查询导致 AJAX 错误回调

javascript - jQuery Datatables - 从搜索中仅返回表中的前 5 行

asp.net - MVC 5 更改主页

javascript - 将焦点设置在下一个下拉列表而不是使用 blur() 方法?