下拉菜单无法在Chrome

Question

正常工作

我有三重下拉菜单，当我选择依据，对于第一个下拉选项，我得到的第二个下拉填充在第二个下拉的值，但这些值下来，虽然我改改我的首次下降的选项下不清除偶数。我正面临着Chrome的这个问题。在Firefox中，它工作正常。可能有人告诉我如何清除以前的选择内容。我已经贴我的代码在引擎收录

http://paste.flingbits.com/m05ef5d2

可以在任何一个请帮助我。

Answer 1

@Cutekate：尝试在您所有的<select>的onChange之间更改onClick。

更新：

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