Выпадающее меню не работает должным образом на Chrome

Question

У меня есть тройное раскрывающееся меню, и когда я выбираю вариант для первого раскрывающегося списка, на основании этого я получаю значения, заполненные во втором раскрывающемся списке, но эти значения во втором раскрывающемся списке не очищаются, даже если я изменяюизменить опцию моего первого выпадающего.Я сталкиваюсь с этой проблемой с Chrome.В Firefox все работает нормально.Может кто-нибудь сказать мне, как очистить предыдущее содержимое выбора.Я вставил свой код в наклейку

http://paste.flingbits.com/m05ef5d2

Может кто-нибудь помочь мне с этим.

Answer 1

@ Cutekate: попробуйте изменить onClick во всех ваших <select> на onChange.

Обновление:

JavaScript (сохраните в xhr.js):

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;
}

HTML :

<!-- 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>