Zend - The PHP Company




Menus & Navigation

Add Code


Dynamic selfdepending dropdown menus  

Type: code fragment
Added by: Dx2
Entered: 12/11/2000
Last modified: 01/12/2000
Rating: ***** (4 votes)
Views: 25902
The represented code is an example of how to get external data from database using PHP and pass it to javascript, controlling 3 levels self-depending dropdown menus. The given example was developped with Oracle, to display tree-like 3-levels product categories.


<?
// make conection and retrieve data from oracle db or any external db to collect info for the tree-like data
$conn ocilogon("db_user","pass","oracle_sid");
$sql "select NAME, ID, OWNER_ID from TABLE_NAME";
$stmt ociparse($conn,$sql);
ociexecute($stmt); $x=0;
while (
OCIFetchInto($stmt,$data,OCI_ASSOC)) { $parse_data[$x][1] = $data["ID"]; $parse_data[$x][2] = $data["OWNER_ID"]; $parse_data[$x][3] = $data["NAME"]; $x++; }
?>
<html>
<head>
<title>Untiltled</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">


<script language="JavaScript">
<!--hide this script from non-javascript-enabled browsers


// Combining retrived data into variable $report (placing separator "|" between each element)
<? 
for ($i=0$i<count($parse_data); $i++) { $report.=$parse_data[$i][1]."|".$parse_data[$i][2]."|".$parse_data[$i][3]."|"; }
?>

var boxes_id=new Array(); var boxes_owner=new Array(); var boxes_name=new Array();
// PRINTING THE $report var INTO THE HTML/JAVASCRIPT VAR
    var data = "<? print $report?>"; 
    var cnt = "<? print count($parse_data?>";

//SPLIT DATA INTO ARRAY
    var datasplit=data.split("|");

//REDISTRIBUTING AGAIN THE COLLECTED DATA FROM THE DB, INTO 3 DIFFERENT ARRAY CORRESPONDING TO THE FIELDS
for (var q=0; q<(cnt*3); q+=3) {
boxes_id[q] = datasplit[q]; boxes_owner[q] = datasplit[q+1]; boxes_name[q] = datasplit[q+2];
}

/* The following functions are self-related - each one calls the next one, to implement the dynamic dropdown updates.
*/

// This is the function called on page OnLoad - responsible for the first dropdown (frm.combo1)
function Go1() {
    var r=0; var plc=0;    var b1=0;
    for (r=0; r<=(cnt*3); r++) {
    if (boxes_owner[r] == 1) { newOptionName = new Option(boxes_name[r], boxes_name[r]);
        self.frm.combo1.options[b1] = newOptionName; b1++; }}
    Go2();
}

// Called from Go1 - responsible for the second dropdown (frm.combo2)
function Go2() {
    var r=0; var plc=0; var b2=0; var sel = 0;
        for (i=(self.frm.combo2.options.length); i>0; i--) {frm.combo2.options[i]=null;}

    var str2 = self.frm.combo1.options[self.frm.combo1.selectedIndex].text;
    for (r=0; r<=(cnt*3);r++) { if (boxes_name[r] == str2) { sel = boxes_id[r]; }}

    for (r=0; r<=(cnt*3); r++) {
        if (boxes_owner[r] == sel) { newOptionName = new Option(boxes_name[r],boxes_name[r]);
            self.frm.combo2.options[b2] = newOptionName; b2++; }}
            self.frm.combo2.options[0].selected = true;
    Go3();
}


// Called from Go2 - responsible for the third dropdown (frm.combo3)
function Go3() {
    var r=0; var plc=0; var b3=1; var sel = 0;
        for (i=(self.frm.combo3.options.length); i>0; i--) {frm.combo3.options[i]=null;}
    
    var str3 = self.frm.combo2.options[frm.combo2.selectedIndex].text;
    for (r=0; r<=(cnt*3); r++) { if (boxes_name[r] == str3) { sel = boxes_id[r]; }}

    newOptionName = new Option(" . . .",""); self.frm.combo3.options[0] = newOptionName;

    for (r=0; r<=(cnt*3); r++) {
        if (boxes_owner[r] == sel) { newOptionName = new Option(boxes_name[r],boxes_name[r]);
            self.frm.combo3.options[b3] = newOptionName; b3++; }}
    
    self.frm.combo3.options[0].selected = true;
}

//GetFunnky calls the new URL and may parse further parameters to it
function GetFunky() {
window.location.href="http://new.url.com/external_file.php?id=";
}

//-->
</script>

</HEAD>

... see example for form details.


Usage Example


<?
$conn 
ocilogon("db_user","pass","oracle_sid");
$sql "select NAME, ID, OWNER_ID from TABLE_NAME";
$stmt ociparse($conn,$sql);
ociexecute($stmt); $x=0;
while (
OCIFetchInto($stmt,$data,OCI_ASSOC)) { $parse_data[$x][1] = $data["ID"]; $parse_data[$x][2] = $data["OWNER_ID"]; $parse_data[$x][3] = $data["NAME"]; $x++; }
?>
<html>
<head>
<title>Untiltled</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">


<script language="JavaScript">
<!--hide this script from non-javascript-enabled browsers

<? 
for ($i=0$i<count($parse_data); $i++) { $report.=$parse_data[$i][1]."|".$parse_data[$i][2]."|".$parse_data[$i][3]."|"; }
?>

var boxes_id=new Array(); var boxes_owner=new Array(); var boxes_name=new Array();
    var data = "<? print $report?>"; 
    var cnt = "<? print count($parse_data?>";

    var datasplit=data.split("|");

for (var q=0; q<(cnt*3); q+=3) {
boxes_id[q] = datasplit[q]; boxes_owner[q] = datasplit[q+1]; boxes_name[q] = datasplit[q+2];
}

function Go1() {
    var r=0; var plc=0;    var b1=0;
    for (r=0; r<=(cnt*3); r++) {
    if (boxes_owner[r] == 1) { newOptionName = new Option(boxes_name[r], boxes_name[r]);
        self.frm.combo1.options[b1] = newOptionName; b1++; }}
    Go2();
}

function Go2() {
    var r=0; var plc=0; var b2=0; var sel = 0;
        for (i=(self.frm.combo2.options.length); i>0; i--) {frm.combo2.options[i]=null;}

    var str2 = self.frm.combo1.options[self.frm.combo1.selectedIndex].text;
    for (r=0; r<=(cnt*3);r++) { if (boxes_name[r] == str2) { sel = boxes_id[r]; }}

    for (r=0; r<=(cnt*3); r++) {
        if (boxes_owner[r] == sel) { newOptionName = new Option(boxes_name[r],boxes_name[r]);
            self.frm.combo2.options[b2] = newOptionName; b2++; }}
            self.frm.combo2.options[0].selected = true;
    Go3();
}


function Go3() {
    var r=0; var plc=0; var b3=1; var sel = 0;
        for (i=(self.frm.combo3.options.length); i>0; i--) {frm.combo3.options[i]=null;}
    
    var str3 = self.frm.combo2.options[frm.combo2.selectedIndex].text;
    for (r=0; r<=(cnt*3); r++) { if (boxes_name[r] == str3) { sel = boxes_id[r]; }}

    newOptionName = new Option(" . . .",""); self.frm.combo3.options[0] = newOptionName;

    for (r=0; r<=(cnt*3); r++) {
        if (boxes_owner[r] == sel) { newOptionName = new Option(boxes_name[r],boxes_name[r]);
            self.frm.combo3.options[b3] = newOptionName; b3++; }}
    
    self.frm.combo3.options[0].selected = true;
}

function GetFunky() {
window.location.href="http://new.url.com/external_file.php?id=";
}

//-->
</script>

</HEAD>


<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="Go1()";>
<form name="frm" method="post" action="">
  <table width="400" border="0" cellspacing="0" cellpadding="5" align="center">
    <tr bgcolor="#CCCCCC"> 
      <td> &gt; 
        <select name="combo1" onChange="Go2()" >
          <option selected>?</option>
        </select>
      </td>
    </tr>
    <tr bgcolor="#CCCCCC"> 
      <td> &gt; 
        <select name="combo2" onChange="Go3()">
          <option selected>?</option>
        </select>
      </td>
    </tr>
    <tr bgcolor="#CCCCCC"> 
      <td>&gt; 
        <select name="combo3">
          <option selected>?</option>
        </select>
      </td>
    </tr>
    <tr bgcolor="#CCCCCC"> 
      <td><a href="javascript:GetFunky()"><b>List products...</b></a> </td>
    </tr>
  </table>
</form>
</body>
</html>


Rate This Script





Search



This Category All Categories