PDA

View Full Version : dynamic dropdowns best way foward


urbanrays
10-26-2009, 03:05 PM
Hi

Im trying to create a couple of dynamic dropdown menus/lists, so when you select the option in the first drop down it populates the 2nd drop down.

What is the best way forward with this AJAX, java, php/mysql. Or an other options that you may know.

Thanks in advance

urbanrays
10-26-2009, 04:26 PM
Its ok folkes after all the searching today I cam across this little bit of code if anyone else is interested in doing this. html code:

<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();">
<FORM name="drop_list" action="yourpage.php" method="POST" >

<SELECT NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT>
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>
</body>
</html>

and here is the java

function fillCategory(){
// this function is used to fill the category list on load
addOption(document.drop_list.Category, "Fruits", "Fruits", "");
addOption(document.drop_list.Category, "Games", "Games", "");
addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}
function SelectSubCat(){
// ON selection of category this function will work
removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");
if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket");
addOption(document.drop_list.SubCat,"Football", "Football");
addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP");
addOption(document.drop_list.SubCat,"ASP", "ASP");
addOption(document.drop_list.SubCat,"Perl", "Perl");
}
}
//////////////////
function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}
}

function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}

Hope this may help anyone looking