Saving Drop Down Menu Value Problem

[IRHM73]

Hi, I wonder whether someone may be able to help me please.

I am using a combination of PHP and AJAX to create two drop down menus on a HTML form. The data is being pulled from a mySQL database with the values in the second dependant on the value selected from the first.

All my coding below is derived from the following: www.plus2net.com/php_tutorial/ajax_drop_down_list.php

The problem I have revolves around the value carried forwarded from the second drop down menu called 'searchheads', which I then want to save into my database. I'll try to explain.

When the user selects a value from the first drop down menu 'detectors', the value held by the script is the 'id' field e.g. User chooses 'Detector 1' from the menu, the 'id' field value of 1 is held by the script ready to be saved.

However, when the user selects a value from the second drop down menu 'searchheads', the value saved is the text value chosen. e.g. User chooses 'Deep Search Head' from the menu, the value held is 'Deep Search Head', and it's this that I would like to change. I would like it, if at all possible to save the 'id' field value as happens with the first drop down menu. I think the answer lies with the 'searchheaddetails.php' file but I haven't a clue what needs to change

I just wondered whether it would be at all possible that someone could show me please what needs to change to solve this.

The first drop down menu called 'detectors' and the behaviours for the second drop down menu, 'searchheads' are created with the following AJAX code:

 function AjaxFunction(detectorid)
            {
            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.addfindstolocation.searchheads.options.length-1;j>=0;j--)
            {
            document.addfindstolocation.searchheads.remove(j);
            }
            
            
            for (i=0;i<myarray.length;i++)
            {
            var optn = document.createElement("OPTION");
            optn.text = myarray[i];
            optn.value = myarray[i];
            document.addfindstolocation.searchheads.options.add(optn);
            
            } 
            }
            }
            var url="searchheaddetails.php";
            url=url+"?detectorid="+detectorid;
            url=url+"&sid="+Math.random();
            httpxml.onreadystatechange=stateck;
            httpxml.open("GET",url,true);
            httpxml.send(null);
            }

The next piece of coding called 'searchheaddetails.php' is linked to the AJAX Function above and pulls the data from a mySQL database to the second drop down menu called 'searchheads'.

<?
$detectorid=$_GET['detectorid'];
require "config.php";
$q=mysql_query("SELECT * FROM searchheads WHERE detectorid='$detectorid' ORDER BY 'searchheadname' ASC");
echo mysql_error();
$myarray=array();
$str="";
while($nt=mysql_fetch_array($q)){
$str=$str . "\"$nt[searchheadname]\"".",";
}
$str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
echo "new Array($str)";

?>

Finally this is the section of my HTML form that creates the drop down menus for the user.

<form name="addfindstolocation" method="post" id="addfindstolocation">
<div align="left">
<select name=detectors id="detectorid" onchange="AjaxFunction(this.value);">
<option value=''>Select One</option>
<?
require "config.php";// connection to database 
 $q=mysql_query("SELECT * from detectors WHERE userid='1'ORDER BY 'detectorname' ASC");
while($n=mysql_fetch_array($q)){
 echo "<option value=$n[detectorid]>$n[detectorname]</option>"; }    
?>
</select>
 </div>
</div>
<p align="left">
<label></label>
<label>Search Head Used</label></p>
<div>
<div align="left">
<select name=searchheads id="searchheadid">
</select>
</div>

Any help would be greatly appreciated as I've been working on this for some time.

Many thanks and kind regards

Chris