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

Question

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

http://paste.flingbits.com/m05ef5d2

Может ли один помочь мне с этим.

Answer 1

@Cutekate: Попытайтесь изменить onClick во всех своих <select> до onChange.

Update:

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>