Question

如果选择了特定选项，我的下拉列表会使用Ajax来显示字段。

HTML：

<select name="test" id="testID" onChange="myFunc()">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<div id="display"></div>

AJAX SCRIPT：

<script>
function myFunc() {
if(document.getElementById('testID').value == "3") {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("display").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "_ajax_test1.cfm", true);
xhttp.send();
}

else if(document.getElementById('testID').value == "2"){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("display").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "_ajax_test2.cfm", true);
xhttp.send();
}

}
</script>

如果选择了option 2或option 3，它确实可以正常运行，但是当我点击option 1 后点击option 2或{ {1}}，最后加载的ajax选项仍然存在。

EG; 如果我点击option 3然后点击option 2，则选项1仍会显示option 1应显示的内容。

那么如何让option 2仅显示其内容而不显示option 1或option 2内容？（请注意，option 3没有加载option 1内容）

Answer 1

为了简化代码，您有以下结构：

if(document.getElementById('testID').value == "3") {
    // do something
} else if(document.getElementById('testID').value == "2") {
    // do something else
}

那么当值等于1时会发生什么？ 什么都没有。为了让事情发生，你必须编写代码来实现它：

if(document.getElementById('testID').value == "3") {
    // do something
} else if(document.getElementById('testID').value == "2") {
    // do something else
} else if(document.getElementById('testID').value == "1") {
    // do something here too
}

你想要发生什么？听起来你想将“display”元素设置为空？因此，您当前将该元素设置为某事：

document.getElementById("display").innerHTML = this.responseText;

相反，将其设置为 nothing ：

document.getElementById("display").innerHTML = "";

如何删除以前加载的Ajax字段？

1 个答案: