Question : SELCT statement based on Javascript Image change code

I have some basic image swap javascript code as attached.
Is it possible to pull data from a sql database based on what option is selected from the dropdown select list?
I want to display, depending on what option is selected (each represents an image of a floor plan), the computers and network outlets available on that floor in a list format based on the following criteria - floor, building - both fields in the database.
So the query would look sometrhing like this -

select cshostname, csroom, csfloorroombuilding, csbuilding, csusername from desktops where csfloor = ??select id?? and csbuilding = ??select id?? and csusername <> 'decommissioned,' order by csroom asc

What I need to know is how to select based on the javascript list values (which point to images) so they can match and can be split between the desired floor and building e.g. if value was '1, CSM', split it so '1' was the floor and 'CSM' was the building (all assuming you can add a seperate value to the value already assigned to the dropdown list - if this is even possible at all!

Any help appreciated and if you need more information or a clearer description of what I would like let me know.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:

           
           
          <script>

/****************************************************/
/** Free script for any use, but please include    **/
/** a link to i-code.co.uk in any redistribution.  **/
/**                                                **/
/** Author : Stephen Griffin, www.i-code.co.uk     **/
/****************************************************/

function changeImage()
{
	var list = document.getElementById('optionlist');
	document.mainimage.src = list.options[list.selectedIndex].value;
}

function prevImage()
{
	var list = document.getElementById('optionlist');
	if(list.selectedIndex == 0)
	{
		list.selectedIndex = list.options.length-1;
	}
	else
	{
		list.selectedIndex--;
	}
	changeImage();
}

function nextImage()
{
	var list = document.getElementById('optionlist');
	if(list.selectedIndex == list.options.length-1)
	{
		list.selectedIndex = 0;
	}
	else
	{
		list.selectedIndex++;
	}
	changeImage();
}
</script>
</head>
<body onLoad="javascript:changeImage()">

<left>
<h1>Location Map</h1></center>
<table align="left" border="0">
<tr>
<td colspan="3" align="center"><img name="mainimage" border="1"></td>
</tr>
<tr>
	<td align="left"><input type="button" value="<- Back" onClick="javascript:prevImage()"></td>
	<td align="center">
	
	<select id="optionlist" onChange="javascript:changeImage()">
		<option value="Images/LG_CSMsm.jpg">Lower Ground Floor, CSM</option>
		<option value="Images/G_CSMsm.jpg">Ground Floor, CSM</option>
		<option value="Images/1_CSMsm.jpg">First Floor, CSM</option>
		<option value="Images/2_CSMsm.jpg">Second Floor, CSM</option>
		<option value="Images/3_CSMsm.jpg">Third Floor, CSM</option>
        <option value="Images/4_CSMsm.jpg">Fourth Floor, CSM</option>
		<option value="Images/5_CSMsm.jpg">Fifth Floor, CSM</option>
		<option value="Images/6_CSMsm.jpg">Sixth Floor, CSM</option>
		<option value="Images/7_CSMsm.jpg">Seventh Floor, CSM</option>
		<option value="Images/8_CSMsm.jpg">Eighth Floor, CSM</option>
        <option value="Images/image1.jpg">Ground Floor, Terrace House</option>
		<option value="Images/image3.jpg">First Floor, Terrace House</option>
		<option value="Images/image4.jpg">Second Floor, Terrace House</option>
		<option value="Images/image2.jpg">Third Floor, Terrace House</option>
		<option value="Images/image3.jpg">First Floor, St Elmo Courts</option>
		<option value="Images/image4.jpg">Fourth Floor, St Elmo Courts</option>
		<option value="Images/image2.jpg">Fifth Floor, St Elmo Courts</option>
        <option value="Images/image1.jpg">Ground Floor, Cashel Street</option>
		<option value="Images/image3.jpg">First Floor, Cashel Street</option>
        <option value="Images/image1.jpg">Ground Floor, Cambridge Terrace</option>
		<option value="Images/image3.jpg">First Floor, Cambridge Terrace</option>
	</select>
	
	</td>
	<td align="right"><input type="button" value="Next->" onClick="javascript:nextImage()"></td>
</tr>
</table>

           
         

Answer : SELCT statement based on Javascript Image change code

The example above is parsing the text, and the way that I suggest. My ASP knowledge isn't that great, so I hope the syntax is correct.

This is the basic flow in outline format of the code at http:#33313830 . This would all be in one single ASP page.

(1)
First check to see if any form values have been sent using the "get" method [i.e., request.querystring(...)].

If there have been and they're not null or empty, this means that changeImage has been called and submitted this page through form. Set the values to be these submitted values.

Else, this page is being viewed for the first time without changeImage being called. Therefore, use the default values (which I set to be the first option in the list).

(2)
Now, use the values in #1 in the database to get the image href and store it in a variable to be used to display. Then display the image.

(3)
When the user changes (i.e., onchange) the selection in the drop down list, get the floor, building, and selected index in javascript. Then change the hidden inputs to be these values, so that they're submitted through the form. Then submit the form.

(4)
In your form, set up the hidden inputs with the values in #1. Also, select the option in the drop down list from the index value in #1 in which image we are viewing (i.e., <% If index = 0 Then response.write("selected=\"selected\"") End If %> ).

And that should work and be done.