Populate results from value of 2 drop down menus

[Qbert423]

I'm putting together a web page which lists a number (200ish) of fabrics. Instead of displaying images of all 200 fabrics on one page, I'm trying to build a simple interface where the user can use 2 drop down menus to narrow down what is displayed. So far I can populate the results using the value from one or other of the drop downs, but I'm not sure how to make the 2 drop downs interact, so they narrow down by one drop down, then are able to narrow down further using the other. Thanks in advance. Any help greatly appreciated. Code follows:

 

HTML:

 

<script type="text/javascript" src="selectfabrics.js"></script>
<form>
<select name="style" onchange="showStyle(this.value)">
<option value="">Select style...</option>
<option value="plain">Plain</option>
<option value="check">Check</option>
<option value="stripes">Stripes</option>
<option value="patterned">Patterned</option>
<option value="linen">Linen</option>
<option value="stretch">Stretch</option>
<option value="wash">Wash and Go</option>
<option value="single">Single Ply</option>
<option value="twoply">2 Ply</option>
<option value="premium">Premium</option>
</select>
<select name="colour" onchange="showColour(this.value)">
<option value="">Select colour...</option>
<option value="beige">Beige</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="brown">Brown</option>
<option value="green">Green</option>
<option value="grey">Grey</option>
<option value="lavender">Lavender</option>
<option value="maroon">Maroon</option>
<option value="navy">Navy</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
</select>
</form>
<div id="txtHint"></div>

 

JAVASCRIPT:

 

var xmlHttp

function showStyle(str) { 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
	alert ("Browser does not support HTTP Request")
	return
}
var url="selectfabrics.php"
url=url+"?q="+str
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function showColour(str) { 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
	alert ("Browser does not support HTTP Request")
	return
}
var url="selectfabrics.php"
url=url+"?p="+str
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() { 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
	document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
} 
}

function GetXmlHttpObject() {
var xmlHttp=null;
try {
	// Firefox, Opera 8.0+, Safari
	xmlHttp=new XMLHttpRequest();
}
catch (e) {
	//Internet Explorer
	try {
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch (e) {
		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
}
return xmlHttp;
}

 

PHP:

 

include_once "funct.php";
connect();

$q = $_GET['q'];
$p = $_GET['p'];

if($q) {
$sql = "SELECT * FROM fabrics WHERE fabric LIKE '%$q%'";
$res = mysql_query($sql) or die(mysql_error());
while ($row = mysql_fetch_array($res)) {
	echo "<div class=\"fabric\"><img src=\"images/fabrics/".$row['filename']."\" /></div>";
}
}

if($p) {
$sql = "SELECT * FROM fabrics WHERE colour LIKE '%$p%'";
$res = mysql_query($sql) or die(mysql_error());
while ($row = mysql_fetch_array($res)) {
	echo "<div class=\"fabric\"><img src=\"images/fabrics/".$row['filename']."\" /></div>";
}
}