Populate <select> dynamically from a database

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!

Try to use jquery..it will reduces ur code

Gopesh
– Gopesh

03/21/2012 07:07:09
Commented Mar 21, 2012 at 7:07 — Gopesh
– Gopesh, Commented Mar 21, 2012 at 7:07

Jibi Abraham · Accepted Answer · 2012-03-21 04:48:02Z

2

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"

answered Mar 21, 2012 at 4:48

Jibi Abraham

4,6962 gold badges33 silver badges60 bronze badges

Add a comment |

Rukmi Patel · Accepted Answer · 2012-03-21 04:59:33Z

1

You have not given id to the drop down. You should give id first. secondly I don't think by writing

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

you can add option element to the select box. you need to come up with other solution.

answered Mar 21, 2012 at 4:59

Rukmi Patel

2,5619 gold badges29 silver badges42 bronze badges

Add a comment |

Tem Henov · Accepted Answer · 2013-06-19 06:27:42Z

0

PHP:

 echo "<select name='country'>";
    echo "<option value=''> Select County </option>";

        while($row = mysql_fetch_assoc($result))
        {
            echo ("<option value = $row[tractCounty]>$row[tractCounty]</option>");
        }

    echo "</select>";

HTML: Replace

        <select name="selectCounty">
        </select>

with

<div id="city">
 </div>

Hope that will helps

answered Jun 19, 2013 at 6:27

Tem Henov

32 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Populate <select> dynamically from a database

3 Answers 3

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related