Question

我有一个三重下拉菜单，当我选择第一个下拉选项时，基于此我得到第二个下拉列表中填充的值但是第二个下拉列表中的这些值即使我更改了改变我第一次下拉的选项。我正面临着Chrome的这个问题。在Firefox中它工作正常。有人可以告诉我如何清除以前的选择内容。我已将代码粘贴到pastebin中

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>

下拉菜单在Chrome上无法正常运行

1 个答案: