...

View Full Version : dynamic drop-down menu



jknott12
01-11-2007, 02:13 AM
I am wondering how to create a dynamic drop down menu like what u would see on a computer website where the item u select changes the price and the current configuration of the computer. im pretty sure u would use javascript for this. ive looked at many tutorials but none of them show this. how would i do this?

david_kw
01-11-2007, 10:11 PM
Well depending what you need would really depend how it should be done. Here is a simple easy way in case what you need it for is simple and easy. :)



<html>
<head>
<title>Dynamic Test</title>
<script type="text/javascript">
function doIt(o) {
var s = "";

if (o.value != "0") {
s += o.text + " - ";
s += o.getAttribute("desc") + " - ";
s += o.getAttribute("cost");
}
document.getElementById("adiv").innerHTML = s;
}
</script>
</head>
<body>
<div>
<select id="s" onchange="doIt(this.options[this.selectedIndex]);">
<option value="0">Select Computer</option>
<option value="100" desc="3GHz Intel DuoCore, 1TB HD, 8 GB RAM" cost="$3,995.00">Mach 3 Computer</option>
<option value="101" desc="2.7GHz Intel DuoCore, 500MB HD, 4 GB RAM" cost="$2,995.00">Mach 3 Computer</option>
<option value="102" desc="2.4GHz Intel DuoCore, 100MB HD, 2 GB RAM" cost="$1,995.00">Mach 3 Computer</option>
</select>
<br />
<div id="adiv"> </div>
</div>
</body>
</html>


Is anyone aware of HTML or XHTML rules that prohibit custom attributes like this?

david_kw

jknott12
01-11-2007, 10:57 PM
thanks that is good but i am also wondering how u can have like a computer that has a set price and then change a component and then it alters the price and the specs.

david_kw
01-12-2007, 10:18 AM
Ok how about this



<html>
<head>
<title>Dynamic Test</title>
<script type="text/javascript">
function doIt() {
var o = document.f.s.options[document.f.s.selectedIndex];
var o2 = document.f.t.options[document.f.t.selectedIndex];
var s = "";
var s2 = "";
var total = 0;

if (o.value != "0") {
s += o.text + " - ";
s += o.getAttribute("desc");
total += parseInt(o.getAttribute("cost"));
}
if (o2.value != "0") {
total += parseInt(o2.value);
s2 += "with " + o2.text;
}
s2 += " - Total $" + total;
document.getElementById("adiv").innerHTML = s;
document.getElementById("bdiv").innerHTML = s2;
}
</script>
</head>
<body>
<div>
<form name="f" action="#" onsubmit="return(false);">
<select id="s" onchange="doIt();">
<option value="0">Select Computer</option>
<option value="100" desc="3GHz Intel DuoCore, 1TB HD, 8 GB RAM" cost="3995">Mach 3 Computer</option>
<option value="101" desc="2.7GHz Intel DuoCore, 500MB HD, 4 GB RAM" cost="2995">Mach 2 Computer</option>
<option value="102" desc="2.4GHz Intel DuoCore, 100MB HD, 2 GB RAM" cost="1995">Mach 1 Computer</option>
</select>
<select id="t" onchange="doIt();">
<option value="0">Select Option</option>
<option value="49">$49 - Mem Stick</option>
<option value="79">$79 - Printer</option>
<option value="99">$99 - Monitor Upgrade</option>
</select>
</form?
<br />
<div id="adiv"> </div>
<br />
<div id="bdiv"> </div>
</div>
</body>
</html>


There should be enough there to figure some stuff out on your own.

Good luck.

david_kw

jknott12
01-21-2007, 09:57 PM
ok so now that i have that code how could i get that stuff to be displayed where i want it to be in my site. instead of it just showing up right below the menus

david_kw
01-21-2007, 11:22 PM
Look at the code. There are <div>s named 'adiv' and 'bdiv' which you can place anywhere in your page.

david_kw



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum