View Full Version : dynamic dropdowns best way foward

10-26-2009, 03:05 PM

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

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:

<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
<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 id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>

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
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;

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

Hope this may help anyone looking