Hi all,

I am in the process of adding a dynamic dropdown of cities that populates based on the county/state selected by the user.

I have managed to get it working but the problem I have is that when the user goes to edit their details this dropdown list does not:

1) Show the dynamically generated list of cities because the list uses the javascript onchange element i.e onChange="AjaxFunction(this.value);"

2)Have the city value that is stored in the database selected as default.

Here is the Ajax/Javascript used:
Code:
<script type="text/javascript">
function AjaxFunction(cat_id)
{
var httpxml;
try
  {
  // Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
          try
                        {
                    httpxml=new ActiveXObject("Msxml2.XMLHTTP");
                    }
              catch (e)
                    {
                try
              {
              httpxml=new ActiveXObject("Microsoft.XMLHTTP");
              }
                catch (e)
              {
              alert("Your browser does not support AJAX!");
              return false;
              }
            }
  }
function stateck() 
    {
    if(httpxml.readyState==4)
      {

var myarray=eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for(j=document.forms[0].city_id.options.length-1;j>=0;j--)
{
document.forms[0].city_id.remove(j);
}


for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];

document.forms[0].city_id.options.add(optn);

} 
      }
    }
    var url="dd.php";
url=url+"?cat_id="+cat_id;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
  }
</script>
Here is the code for dd.php:
Code:
<?
include('../Secure/DBConnect.php');

$cat_id=$_GET['cat_id'];
$q=mysql_query("SELECT * FROM locations WHERE tier4='$cat_id' AND tier5 != 0");
echo mysql_error();
$myarray=array();
$str="";
while($nt=mysql_fetch_array($q)){
$str=$str . "\"$nt[name]\"".",";
}
$str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
echo "new Array($str)";

?>
and this is how the function is called:
Code:
<tr><td class="input_label" align="right">County:</td><td colspan = "3"><?=$rs->SelectSQLWithValue("tier4", "form", "SELECT id, name, tier_value FROM locations WHERE tier_value < 5 AND tier5 = 0 AND tier_value > 1 ORDER BY id", 200,'County','onChange="AjaxFunction(this.value);"')?><span style="color:#5c9514; font-size:12px">*</span></td></tr>  
                  <tr><td class="input_label" align="right">Town/City:</td><td colspan = "3"><select name='city_id'><option value="1" disabled selected>Select county first...</option></select><span style="color:#5c9514; font-size:12px">*</span></td></tr>
The first problem is to get the list to dynamically populate on page load and the second is to include the users selected city as "selected" in the options created by javascipt and ajax functions.

Any help would be appreciated.

Thank you