javascript - Drop down menu does not work properly on Chrome -
i have triple drop down menu , when select option first drop down, based on values populated in second drop down these values in second drop down not clear though change change option of first drop down. facing problem chrome. in firefox works fine. 1 tell me how clear previous selection contents. have pasted code in pastebin
http://paste.flingbits.com/m05ef5d2
could 1 please me this.
@cutekate: try changing onclick
in <select>
's onchange
.
update:
javascript (save xhr.js
):
var xhr; function countyselect(q) { if (q != "select state") { xhr = getxmlhttpobject(); if (xhr == null) { document.write("there 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 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 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 displayed here --> </div>
Comments
Post a Comment