PHP Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,109 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,045 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Dynamic Dropdown Menus

Dynamic Dropdown Menus, Generating a Javascript from php to manage dropdowns.

Options

CTphpnwb

5 Jun, 2009 - 10:18 AM

Post #1

I've noticed people asking about creating dynamic drop down menus in php, and while the short answer is you can't do that in php, the long answer is that you can use php to populate arrays in Javascript, which can then update sub menus dynamically. This means that you will need to have a basic understanding of both php and Javascript to make alterations to this script.

It is written as a php function, so it should be easily incorporated into a class, or used essentially as is. The parameter sent to the function is the array containing the various make, models, and prices. Changing them should be a snap!

The php itself is very simple, It simply outputs the desired Javascript, most of which is prewritten. Because we want to be able to change the information in the drop down menus, the php code needs to translate the information in its array into the Javascript arrays, and then continue outputting the code.

Please note that while php is generally browser independent, Javascript can behave differently on different browsers. I've tested this on standards compliant browsers like Safari and Firefox. I don't know or care if this works in Internet Explorer. I can be made to care, but that would take loads of cash!

The php code:

CODE

<?php
// The array could come from anywhere, including a database,
// but I'm setting it here so that you can see what
// its structure is. These prices are fictitious!
$myarray['Ford']['Explorer'] = array(10000,10501,11002);
$myarray['Ford']['Mustang'] = array(10003,10504,11005);
$myarray['GM']['Chevette'] = array(10006,10507,11008);
$myarray['GM']['Camaro'] = array(10009,10510,11011);
$myarray['Chrysler']['M300'] = array(10012,10513,11014);
$myarray['Chrysler']['Minivan'] = array(10015,10516,11017);
$myarray['Chrysler']['Jeep'] = array(10018,10519,11020);

function dependant_menus($selections) {

$script = '<script language="javascript">
function getprices(sel) {
    var self = this;
    var prices = new Array();
    var makes = new Array();
    var models = new Array();

';

$makes = "\tmakes = new Array('";
$models ="";
$prices = "";
foreach($selections as $key => $mod) {
    $makes .= $key."', '";
    $models .= "\tmodels['".$key."'] = new Array('";
    foreach($mod as $mdl => $theprices) {
        $models .= $mdl."', '";
        $prices .= "\tprices['"; //.$mod."'] = new Array(";
        $prices .= $mdl."'] = new Array(";
        foreach($theprices as $aprice)  {
            $prices .= $aprice.", ";
        }
        $prices = substr($prices,0,-2).");\n";
    }
    $models = substr($models,0,-3).");\n";
}
$makes = substr($makes,0,-3).");\n";

$script .= $makes.$models.$prices;

$script .='
    xx = document.multiple.Make.selectedIndex;
    yy = document.multiple.Model.selectedIndex;

    n=prices[models[makes[xx]][sel]].length;
    document.multiple.Price.options.length=0;
    for(k=0;k<n;k++) {
        document.multiple.Price.options[k] = new Option(prices[models[makes[xx]][yy]][k],prices[models[makes[xx]][yy]][k],false, false);
    }
}

function getmodels(sel) {
    var makes = new Array();
    var models = new Array();

';
$script .= $makes.$models;

$script .= '
    j= models[makes[sel]].length;
    document.multiple.Model.options.length=0;
    for(k=0;k<j;k++) {
         document.multiple.Model.options[k] = new Option(models[makes[sel]][k],models[makes[sel]][k],false, false);
    }
getprices(sel);
}

</script>';
echo $script;
}
// End of function

echo "<html><head>
";
dependant_menus($myarray);
echo "
</head>
<body>
";

echo '<form name="multiple" action="vardump.php">
<select name="Make" onChange="getmodels(this.selectedIndex)">
<option value=Ford>Ford</option>
<option value=GM>GM</option>
<option value=Chrysler>Chrysler</option>
</select>
<select name="Model" onChange="getprices(this.selectedIndex)">
<option></option>
</select>
<select name="Price">
<option></option>
</select>
<input type="submit" name="Submit" value="Submit">
</form>
';

// You need to cal the getmodels function after the form has been set so that
// the submenus will be populated.
echo '<script language="javascript">
getmodels(0);
</script>
</body>
</html>
';
?>

The html/Javascript that the php code produces:

CODE

<html><head>
<script language="javascript">
function getprices(sel) {
    var self = this;
    var prices = new Array();
    var makes = new Array();
    var models = new Array();

    makes = new Array('Ford', 'GM', 'Chrysler');
    models['Ford'] = new Array('Explorer', 'Mustang');
    models['GM'] = new Array('Chevette', 'Camaro');
    models['Chrysler'] = new Array('M300', 'Minivan', 'Jeep');
    prices['Explorer'] = new Array(10000, 10501, 11002);
    prices['Mustang'] = new Array(10003, 10504, 11005);
    prices['Chevette'] = new Array(10006, 10507, 11008);
    prices['Camaro'] = new Array(10009, 10510, 11011);
    prices['M300'] = new Array(10012, 10513, 11014);
    prices['Minivan'] = new Array(10015, 10516, 11017);
    prices['Jeep'] = new Array(10018, 10519, 11020);

    xx = document.multiple.Make.selectedIndex;
    yy = document.multiple.Model.selectedIndex;

    n=prices[models[makes[xx]][sel]].length;
    document.multiple.Price.options.length=0;
    for(k=0;k<n;k++) {
        document.multiple.Price.options[k] = new Option(prices[models[makes[xx]][yy]][k],prices[models[makes[xx]][yy]][k],false, false);
    }
}

function getmodels(sel) {
    var makes = new Array();
    var models = new Array();

    makes = new Array('Ford', 'GM', 'Chrysler');
    models['Ford'] = new Array('Explorer', 'Mustang');
    models['GM'] = new Array('Chevette', 'Camaro');
    models['Chrysler'] = new Array('M300', 'Minivan', 'Jeep');

    j= models[makes[sel]].length;
    document.multiple.Model.options.length=0;
    for(k=0;k<j;k++) {
         document.multiple.Model.options[k] = new Option(models[makes[sel]][k],models[makes[sel]][k],false, false);
    }
getprices(sel);
}

</script>
</head>
<body>
<form name="multiple" action="vardump.php">
<select name="Make" onChange="getmodels(this.selectedIndex)">
<option value=Ford>Ford</option>
<option value=GM>GM</option>
<option value=Chrysler>Chrysler</option>
</select>
<select name="Model" onChange="getprices(this.selectedIndex)">
<option></option>
</select>
<select name="Price">
<option></option>
</select>
<input type="submit" name="Submit" value="Submit">
</form>
<script language="javascript">
getmodels(0);
</script>
</body>
</html>

I've kept the html simple for this demonstration. Feel free to add to it, but remember that you need to do that primarily in the php function!