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