I'm hoping someone can help me out with a little question.
I have the following code to change combo box entries based on what is selected in the previous box.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Representation of AJAX</title>
<script type="text/javascript">
function update(str)
{
var xmlhttp;
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("data").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","demo.php?opt="+str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<select id="optionA" onchange="update(this.value)">
<option value="0">Select...</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
<br/>
<select id="data">
<option>Select an Option...</option>
</select>
</body>
</html>
And
<?php
$opt = $_GET['opt'];
switch($opt)
{
case 0:
default:
echo '
<option>Select an Option...</option>
';
break;
case 1:
echo '
<option value="opt1_1">Option1_Test1</option>
<option value="opt1_2">Option1_Test2</option>
<option value="opt1_3">Option1_Test3</option>
';
break;
case 2:
echo '
<option value="opt2_1">Option2_Test1</option>
<option value="opt2_2">Option2_Test2</option>
<option value="opt2_3">Option2_Test3</option>
';
break;
}
?>
I'm not massively conversant with Javascript so was wondering if it were possible to modify the javascript (the second chunk of code I can deal with myself I think) to do what is described below.
Box 1 contains a row of images, serving as links, when one is clicked, a second box below these images is populated with more image links based on the selection from box 1 (information is grabbed from a database).
I imagine from my limited understanding that I should be able to modify the 'onchange' js event to an onclick or whatever the equivalent is (can't remember off the top of my head) event inside an 'img' tag, or an 'a href' tag, again can't remember which right now.
Hopefully someone will understand what I'm trying to do and make sense of it all :)
Thanks TheMightySpud
