Click to See Complete Forum and Search --> : Devilish listboxes


Carnivore
10-29-2004, 10:08 AM
Hi,

what I'm trying to do:
I have a website which hosts certain files. These files have categories and subcategories. Now, I've created a submit form, which retrieves the currentcategories from the database and prints them into a listbox with specific submit values and names. What I want to do is to have this master category listbox affect the subcategory listbox, so that onChange the subcategory listbox would update and list the subcategories for the selected master category (which would be retrieved from the database via php) Everything should be dynamic and need no refreshing.

I'm sure it's possible, but how? I didn't know whether to post this here or in the php section, but hey!

Thanks ahead.

OneThoughtJay
11-01-2004, 10:09 AM
Hi ya,

Take a loook at the following page:
Object Oriented Dynamic Linked Listboxes (http://www.atgconsulting.com/oodynlistbox.asp).

It covers your thread neatly. ;)

Yours searchfully,
Jay

Warren86
11-01-2004, 10:51 AM
<HTML>
<Head>
<Script Language=JavaScript>

Level1 = new Array("Apparel","Books")

Apparel = new Array("Men","Women")
Books = new Array("Biography","Fiction","Nonfiction")

Men = new Array("Shirts","Ties","Belts")
Women = new Array("Blouses","Skirts","Scarves")

Biography = new Array("Contemporay","Historical","Other")
Fiction = new Array("Science","Romance")
Nonfiction = new Array("How-To","Travel","Cookbooks")

function fillSelect(isValue,isNext){

isNext.style.display = "";
isNext.length = 1;
curr = eval(isValue);
for (each in curr)
{
isData = new Option(curr[each],curr[each]);
isNext.add(isData,isNext.options.length);
}
}

function getValue(isValue){

alert(isValue);
}

</Script>
</Head>
<Body>
<center>
<h4>Dependent Select List, within a form</h4>
<Form name='Categories'>
<Select name='List1' onChange="fillSelect(this.value,Categories.List2)">
<option selected>Make a selection</option>
</Select>
&nbsp
<Select name='List2' onChange="fillSelect(this.value,Categories.List3)">
<option selected>Make a selection</option>
</Select>
&nbsp
<Select name='List3' onChange="getValue(this.value)">
<option selected >Make a selection</option>
</Select>
</Form>
</center>
<Script>
fillSelect('Level1',Categories.List1)
Categories.List2.style.display = "none";
Categories.List3.style.display = "none";
</Script>
</Body>
</HTML>

Paul Jr
11-01-2004, 07:02 PM
That code doesn't work in Gecko-based browsers.

Aelaron
11-10-2004, 02:24 PM
Jay,

I am attempting to do the samething as this thread is focusing on and I have checked the link in your reply to this. The only twist to what I am doing is that the first listbox's options are hard coded in the webpage. The second list box is then filled from my database depending on the selection in the first listbox.

I am not savy enough with javascript to understand how to modify the method defined in the Object Oriented Dynamic Linked Listboxes link to suit my need. Any help would be great!

Thanks!

JB