Javascript 下拉菜单在Chrome上无法正常工作

我有一个三重下拉菜单，当我为第一个下拉菜单选择一个选项时，基于此，我会在第二个下拉菜单中填充值，但第二个下拉菜单中的这些值不会清除，即使我更改了第一个下拉菜单的“更改”选项。我面临着这个问题与铬。在Firefox中，它运行良好。有人能告诉我如何清除以前的选择内容吗。我已将代码粘贴到粘贴箱中

---

谁能帮我一下吗。

@Cutekate:试着将所有

中的

onClick

更改为

onChange

更新：

JavaScript（将其保存到

xhr.js

）：

HTML:

陈述
选择状态
阿拉巴马州
田纳西州
得克萨斯州
县
选择县
属
选择属

它确实有效：）但在IE中它不起作用。它在第二个下拉菜单中根本不显示我的选项。我试着在许多方面改变它，但它不起作用。你能帮我吗？@Cutekate:请看我上面更新的答案，我希望它能有所帮助。：-）

var xhr;

function countySelect(q) {
    if (q != "Select State") {
        xhr = GetXmlHttpObject();
        if (xhr == null) {
            document.write("There was a problem while using XMLHTTP");
            return;
        }
        var strURL = "findCounty.php?state=" + q + "&sid=" + Math.random();
        xhr.onreadystatechange = countyStateChanged;
        xhr.open("GET", strURL, true);
        xhr.send(null); 
    }
    else
    {
        document.getElementById("county").options.selectedIndex = 0;
        document.getElementById("genus").options.selectedIndex = 0;
        document.getElementById("csv").innerHTML = '';
    }
}

function genusSelect(q) {
    if (q != "Select County") {
        xhr = GetXmlHttpObject();
        if (xhr == null) {
            document.write("There was a problem while using XMLHTTP");
            return;
        }
        var strURL = "findGenus.php?county=" + q + "&sid=" + Math.random();
        xhr.onreadystatechange = genusStateChanged;
        xhr.open("GET", strURL, true);
        xhr.send(null);
    }
    else
    {
        document.getElementById("genus").options.selectedIndex = 0;
        document.getElementById("csv").innerHTML = '';
    }
}

function dataSelect(q) {
    if (q != "Select Genus") {
        xhr = GetXmlHttpObject();
        if (xhr == null) {
            document.write("There was a problem while using XMLHTTP");
            return;
        }
        var strURL = "getData.php?genus=" + q + "&sid=" + Math.random();
        xhr.onreadystatechange = dataStateChanged;
        xhr.open("GET", strURL, true);
        xhr.send(null); 
    }
}

function countyStateChanged() {
    if (xhr.readyState == 4) {
        document.getElementById("countydiv").innerHTML = xhr.responseText;
    }
}

function genusStateChanged() {
    if (xhr.readyState == 4) { 
        document.getElementById("genusdiv").innerHTML = xhr.responseText;
    }
}

function dataStateChanged() {
    if (xhr.readyState == 4) { 
        document.getElementById("csv").innerHTML = xhr.responseText;
    }
}

function GetXmlHttpObject() {
    var xhr = null;
    try {
        // Firefox, Opera 8.0+, Safari
        xhr = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xhr;
}

<!-- place above <form> -->
<script type="text/javascript" src="xhr.js"></script>

<!-- rest of code... -->

    <tr>
        <td>State</td>
        <td>
            <select id="state" name="state" onchange="countySelect(this.value)">
                <option value="Select State">Select State</option>
                <option value="Alabama">Alabama</option>
                <option value="Tennessee">Tennessee</option>
                <option value="Texas">Texas</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>County</td>
        <td>
            <div id="countydiv">
                <select id="county" name="county" onchange="genusSelect(this.value)">
                    <option value="Select County">Select County</option>
                </select>
            </div>
        </td>
    </tr>
    <tr>
        <td>Genus</td>
        <td>
            <div id="genusdiv">
                <select id="genus" name="genus" onchange="dataSelect(this.value)">
                    <option value="Select Genus">Select Genus</option>
                </select>
            </div>
        </td>
    </tr>

<!-- rest of code... -->

<div id="csv">
    <!-- output of dataSelect will be displayed here -->
</div>