Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction.
I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html
The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely.
If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks.
I'm sorry I should of provided more details. No, not all the heights are unique, in fact many of the combinations would result in the same image displaying, I really should of mentioned that.
As i mentioned several of the width and height combinations will display the same image. There are a few exceptions. I tried to list all the combinations that point to the related image.
I listed the heights first in the this case (since they would of repeated often) followed by the possible widths for that image.
Provide a list of the height - width and image combinations
and a possible link to the images.
About how many combination and images do you have,
as well as if there are any multiples of the combinations.
Do you really need 2 select boxes or will a single list work as well?
Hey I just posted the info. I don't have links to the images at the moment. The idea was to have two so the user would first pick a width and then a height option, thus the image would update.
I think this works - give it a try. You need to change the names of the pics in the if statements to your image file paths:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
<title>Dynamic Select Statements</title>
<script type="text/javascript">
//<![CDATA[
// array of possible widths in the same order as they appear in the width selection list
var widthLists = new Array(4)
widthLists["empty"] = ["Select a Country"];
widthLists["12"] = ["30", "36", "42"];
widthLists["15"] = ["30", "36", "42"];
widthLists["18"] = ["30", "36", "42"];
widthLists["21"]= ["15","18","30", "36", "42"];
widthLists["24"]= ["15","18","30", "36", "42"];
widthLists["27"]= ["30", "36", "42"];
widthLists["30"]= ["12", "15","18","21","24","27","30", "36", "42"];
widthLists["33"]= ["12", "15","18","24","27","30", "36", "42"];
widthLists["36"]= ["12", "15","18","24","30", "36", "42"];
widthLists["39"]= ["30","42"];
widthLists["42"]= ["30","42"];
widthLists["48"]= ["30"];
widthLists["54"]= ["30"];
widthLists["60"]= ["30"];
/* heightChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function heightChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the heightLists array
cList = widthLists[which];
// get the height select element via its known id
var cSelect = document.getElementById("height");
// remove the current options from the height select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
function showPic(){
widthbox=document.getElementById("width")
var thewidth = Number(widthbox.options[widthbox.selectedIndex].value);
heightbox=document.getElementById("height")
var theheight = Number(heightbox.options[heightbox.selectedIndex].value);
if ((theheight==12)&&(thewidth==30||33||36)){
pic="image-01"
} else if ((theheight==15)&&(thewidth==21||24||30||33||36)){
pic="image-02"
} else if ((theheight==18)&&(thewidth==21||24||30||33||36)){
pic="image-03"
} else if ((theheight==21)&&(thewidth==30)){
pic="image-04"
} else if ((theheight==24)&&(thewidth==24||30||33||36)){
pic="image-05"
} else if ((theheight==27)&&(thewidth==30)){
pic="image-06"
} else if ((theheight==30)&&(thewidth==24||27||30||33||36||39||42)){
pic="image-07"
} else if ((theheight==36)&&(thewidth==24||27||30||33||36)){
pic="image-07"
} else if ((theheight==30)&&(thewidth==45||48||49)){
pic="image-09"
} else if ((theheight==30)&&(thewidth==60)){
pic="image-10"
} else if ((theheight==42)&&(thewidth==9||12||15||18||21)){
pic="image-11"
} else if ((theheight==42)&&(thewidth==24||27||30||36||39)){
pic="image-12"
}
document.getElementById("thediv").style.display="block";
document.getElementById("thepic").src=pic;
}
</script>
</head>
<body>
<label for="width">Select a width</label>
<select id="width" onchange="heightChange(this);">
<option value="empty">Select a width</option>
<option value="12">12</option>
<option value="15">15</option>
<option value="18">18</option>
<option value="21">21</option>
<option value="24">24</option>
<option value="27">27</option>
<option value="30">30</option>
<option value="33">33</option>
<option value="36">36</option>
<option value="39">39</option>
<option value="42">42</option>
<option value="48">48</option>
<option value="54">54</option>
<option value="60">60</option>
</select>
<br />
<label for="height">Select a height</label>
<select id="height" onchange="showPic()">
<option value="0">Select a height</option>
</select>
<div id="thediv" style="display:none">
<img src="" id="thepic">
</div>
</body>
</html>
xelawho, you are the man! I can't express how thankful I am. I tested it out and it works just right. Really appreciate you taking time out your day to help me.
Before you post, read our: 
Several questions
An alternative attempt.
