dardartektips
MIS
I have a website that I am trying to create a page where our customers can pick a light fixture, then pick the color of the light fixture and then pick the shades that will go on it and have the page display a picture of what they have selected. I want the 2nd drop down box to be populated based on what the customer enters in the first drop-down box and I'm thinking about for the shades to show a picture of the available options and have them click the shade to have it placed on the picture. I haven't gotten that far yet though.
I have the code that displays a picture of the light bar that they select with the first drop down and I have code to populate the second drop down but I can't get them to work together.
This is not on the website currently but for an idea of the pictures to be displayed you can check out our website at (this is the page that will show you best how it works)
This is the code I have so far:
How do I get this to work together ??
I have the code that displays a picture of the light bar that they select with the first drop down and I have code to populate the second drop down but I can't get them to work together.
This is not on the website currently but for an idea of the pictures to be displayed you can check out our website at (this is the page that will show you best how it works)
This is the code I have so far:
Code:
</head>
<script language="javascript">
function showimage(){
if (!document.images)
return
document.images.pictures.src=document.build_a_bar.fixture.options[document.build_a_bar.fixture.selectedIndex].value
}
function setOptions(chosen) {
var selbox = document.build_a_bar.finish;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Finish',' ');}
if (chosen == "383") {
selbox.options[selbox.options.length] = new Option('Antique Brass','AB');
selbox.options[selbox.options.length] = new Option('Black Copper','BC');
selbox.options[selbox.options.length] = new Option('Bronze','BRZ');
selbox.options[selbox.options.length] = new Option('Brushed Nickel','BN');
}
if (chosen == "389") {
selbox.options[selbox.options.length] = new Option('Bronze','BRZ');
selbox.options[selbox.options.length] = new Option('Burgundy','666');}
if (chosen == "802") {
selbox.options[selbox.options.length] = new Option('bronze','BRZ');}
if (chosen == "803") {
selbox.options[selbox.options.length] = new Option('Black','222');
selbox.options[selbox.options.length] = new Option('Bronze','BRZ');}
if (chosen == "804") {
selbox.options[selbox.options.length] = new Option('Brushed Nickel','BN');
selbox.options[selbox.options.length] = new Option('Bronze','BRZ');
selbox.options[selbox.options.length] = new Option('Golden Leather','GL');}
}
</script>
</head>
<body>
<form name="build_a_bar">
<select name="fixture" size="1" onChange="showimage(); onChange= setOptions(document.build_a_bar.fixture.options[document.build_a_bar.fixture.selectedIndex].value)";>
<option selected value ="images/background.jpg">select a light</option>
<option value="images/383.jpg">383</option>
<option value="images/389.jpg">389</option>
<option value="images/802.jpg">802</option>
<option value="images/803.jpg">803</option>
<option value="images/804.jpg">804</option>
</select></form>
<img src="images/background.jpg" name ="pictures" width="500" height ="200">
<select name="finish" size="1">
<option value=" " selected="selected">Finish</option>
</select>
</body>