Dependant Selectboxes using Ajax

Dependant Selectboxes using Ajax

HTML code inside text area


first select box
<SELECT name="cmbLabel" id="selectOne" onchange="populateSecondSelect('selectOne','secondSelect');">
<option value="">Select</option>
</SELECT>
second select box
<SELECT multiple="true" size="10" name="cmbGenre[]" id="secondSelect" style="width:160px">
</SELECT>


JS

var req;
var destid = '';
function loadXMLDoc(url)
{
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
}
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200)
{
// ...processing statements go here...
var response = req.responseText;
//alert(response);
var strValue='';
//alert(response);
var response = req.responseXML;
var output = document.getElementById(destid);
output.options.length = 0;
var optiontag = response.documentElement.getElementsByTagName('showoptions');
var count_options = optiontag.length;
//alert(count_options);
for(var loopResult = 0; loopResult < count_options ;loopResult++){
var optionName = optiontag[loopResult].getAttribute("name");
strValue=optiontag[loopResult].getAttribute("value")
var strReplaceAll = strValue;
var intIndexOfMatch = strReplaceAll.indexOf( "and" );

// Loop over the string value replacing out each matching
// substring.
while (intIndexOfMatch != -1){
// Relace out the current instance.
strReplaceAll = strReplaceAll.replace("and", "&" )

// Get the index of any next matching substring.
intIndexOfMatch = strReplaceAll.indexOf( "and" );
}


var optionValue = strReplaceAll;
//var optionValue = optiontag[loopResult].getAttribute("value").replace("(#)","&");
output.options[loopResult]= new Option(optionName,optionValue);

}
}
else
{
alert("There was a problem retrieving the XML data:\n" + req.statusText);
}
}

}
function populateSecondSelect(select_1,select_2)
{
//alert(select_1);
var input = document.getElementById(select_1).value;
destid = select_2;
// Input mode
var url ='populateselect.php?q='+input;
loadXMLDoc(url);
}


PHP


include("includes/dbConnection.php");
if($q = $_GET['q']){
$query = "your query =".intval($q);
$result = mysql_query($query);
$numTotal = mysql_num_rows($result);
while($listShows = mysql_fetch_array($result)){
$options .= "";
}
}
else{
$options = "";
}
?>
// generating a virtual XML which is used to fill Combo
// The response XML is send to populateSelect.js file
header('Content-Type: text/xml');
$filedata ="
";
$filedata .= $options;
$filedata .=" ";
print $filedata;
?>