Question

I am trying to populate a select list with AJAX as follows:

HTML:

<table>
<tr>
    <td>Select State</td>
    <td>
    <select name="tractDrop" onchange="populateSelect(this.value)">
       <option value = "TX">TX</option>
       <option value = "LA">LA</option>
       <option value = "CA">CA</option>
    </select>
    </td>
   </tr>
   <tr>
    <td>
        Select County
    </td>
    <td>
        <select name="selectCounty">
        </select>
    </td>
   </tr>
</table>

JAVASCRIPT:

function populateSelect(str)
{
    if (str=="")
        {
            document.getElementById("selectCounty").innerHTML="";
            return;
         }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("selectCounty").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","selectajax.php?q="+str,true);
    xmlhttp.send();
}

PHP:

<?php
    $q=$_GET["q"];
    include '../include/engine.php';
    $sql="SELECT DISTINCT * FROM tractIndex WHERE tractState = '".$q."'";
    $result = mysql_query($sql);
    echo ("<option value=''> Select County </option>");
    while($row = mysql_fetch_assoc($result))
    {
        echo ("<option value = $row[tractCounty]>$row[tractCounty]</option>");
    }
?>

Database table tractIndex has columns: ID, tractState, tractCounty

Everything works except the part in the javascript where I’m trying to populate the select options:

document.getElementById("selectCounty").innerHTML=xmlhttp.responseText;

Thank you for anyone who is willing to help. Sorry for being so stupid!

Answer 1

If the code you posted is correct, the mistake is obvious,

document.getElementById("selectCounty").innerHTML=xmlhttp.responseText;
//The line above will try to find an element with the id 'selectCountry'

As far as I can see, none of your elements have such an id. Try this change

<select id="selectCounty"></select>
//Note the change from "name" to "id"