i was wondering if javascript can make this complex script. Well, it sounds like this. There is total of 4 components inside the combo boxes. :confused:
- Box 1 (Drop-down)
- Box 2 (Drop-down)
- Description Text Box
- Dynamic Images
http://img.photobucket.com/albums/v514/chin_sheng/question.jpg
1) OnSelect:Box 1 changes value on Box 2. (This sounds easy)
2) OnSelect:Box 2 value changes images & description. Each and every value has its own description and image. (This kinda hard for me)
So, can it be done? Or i need another language? Or is it impossible?
Please let me know. Thx :)
Basscyst
11-23-2004, 09:31 PM
Totally possible, but totally gonna have to post some code, to show you made an attempt or something. Or, if you have no desire to learn \ try, post in work offers and requests forum.
Basscyst
sad69
11-23-2004, 10:05 PM
Yes this is possible with Javascript alone, however, you may want to look at incorporating a server-side language and a database if any of these items will be updated or added to somewhat regularily.
Part of this undertaking is understanding and utilizing the onChange event handler and the document.getElementById() function. The other part is understanding how to organize the different data into Arrays and using the ID attribute on the various elements that you want to update.
One question I had was if this setup was to be used as a form. IE: will there be a submit button? Or is this purely informational?
The reason I ask is because if it is NOT to be used as a form, we can use the VALUE attribute of the OPTION elements to hold data for this dynamic changing of elements.
I'll work on an example for you, but take a good look at this post and research its contents on www.google.com and see if it gets you in the right direction. Post back if you run into any further troubles.
Hope that helps,
Sadiq.
sad69
11-24-2004, 01:09 AM
Ok, so I briefly did this up.
You should be able to figure out how to modify it to meet your needs. If you have any issues with it, let me know.
Hope that helps,
Sadiq.
fongb
11-24-2004, 09:13 AM
Well, sad69.. it is purely for informational. So i guess it doesn't need a "Submit" button. And furthermore, sorry pals i didn't read "READ ME 1st!".
Well, here is the code i've been working on. Juz seems missing the image part. Sorry guys, didn't know need to post my work. HeHe :D . Anyway.... here is the code
<html>
<script language="javascript">
var StrParent = "", StrChild = "", StrMatch = "", CategoryParent, CategoryChild, CategoryMatch;
var StrParentName = "", StrChildName = "", CategoryParentName, CategoryChildName;
// here use asp, php, jsp or whatever to conruct ur sting
StrChild = "1|2|3|4|5|";
StrChildName = "Parent 1 Child 1|Parent 1 Child 2|Parent 2 Child 1|Parent 2 Child 2|Parent 2 Child 3|";
StrMatch = "aaa|aaa|bbb|bbb|bbb|";
// end construct
// split to array
CategoryChild = StrChild.split ("|");
CategoryMatch = StrMatch.split ("|");
CategoryChildName = StrChildName.split ("|");
function LoadCombo (ParentID, TargetedCombo, ItemSelected) {
var x = -1, y = ((ParentID == "0")?0:1);
x = TargetedCombo.length;
while (x--) { // clear current combo
TargetedCombo.options[x]=null;
}
for (x = 0; x < CategoryMatch.length; x++) {
if (CategoryMatch[x] == ParentID) {
TargetedCombo.options[y] = new Option(CategoryChildName[x], CategoryChild[x]);
y++;
}
}
if (ItemSelected != "") {
for (x = 0; x < TargetedCombo.length; x++) {
if (TargetedCombo[x].value == ItemSelected) {
TargetedCombo[x].selected = true;
}
}
}
}
function Display (DisplayText) {
document.getElementById ("sp_description").innerHTML = DisplayText;
}
</script>
<body>
<form>
<select name="combo1" onChange="LoadCombo(this[this.selectedIndex].value, document.forms[0].combo2);">
<option value=""></option>
<option value="aaa">Parent 1</option>
<option value="bbb">Parent 2</option>
</select>
<select name="combo2" onChange="Display(this[this.selectedIndex].text)">
</select>
<br><br>
<span id="sp_description"></span>
</form>
<body>
</html>
Thanks sad69!
TOP
