Current location: Hot Scripts Forums » General Web Coding » JavaScript » Multi-Level drill down lists


Multi-Level drill down lists

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 11-13-07, 07:01 PM
zendobi zendobi is offline
Newbie Coder
  
Join Date: Nov 2005
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Multi-Level drill down lists
We are working on a category select system for a website and have been looking around at several options and I came across Yahoo answers category selector today, and it is perfect!! However I cannot for the life of me find anywhere on the internet that discusses making one like they have.

I ripped a copy of the page for a demonstration of what they have since it has exactly the functionality I need you can see it at http://www.qlogix.com/catbrowser.html

Does anyone know where I can find some information on creating a system exactly like is on the page above, without just straight jacking Yahoo's.


Thanks in advance.

Mike
__________________
Mike Miller
ZapContent - Free Article Submission for Authors | Free Content for Publishers
Reply With Quote
  #2 (permalink)  
Old 11-14-07, 10:16 AM
End User's Avatar
End User End User is offline
Level II Curmudgeon
  
Join Date: Dec 2004
Posts: 3,027
Thanks: 14
Thanked 35 Times in 33 Posts
There's some similar javascript code here:

http://www.mattkruse.com/javascript/...st/source.html

The demo page is here:

http://www.mattkruse.com/javascript/...ist/index.html

Matt Kruse has all sorts of cool stuff that he's made and released.
__________________
I don't live on the edge, but sometimes I go there to visit.
-------------------------------------------------------------------------
Sanitize Your Data | Oracle Date & Substring Functions | Code Snippet Library | [url=http://www.codmb.com/Call Of Duty[/url]
Reply With Quote
  #3 (permalink)  
Old 11-14-07, 04:41 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
Yahoo's category selector is very easy to recreate.
There just using a couple div's some radio inputs and
some select elements.
The select elements can be populated by using Javascript.

None of which is hard to do.
__________________
Jerry Broughton
Reply With Quote
  #4 (permalink)  
Old 11-14-07, 04:45 PM
zendobi zendobi is offline
Newbie Coder
  
Join Date: Nov 2005
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Job0107, would mind explaining a bit more, or providing a place i could see an example of how to do it?
__________________
Mike Miller
ZapContent - Free Article Submission for Authors | Free Content for Publishers
Reply With Quote
  #5 (permalink)  
Old 11-14-07, 10:38 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
Here is the beginning of a form that looks similar to the one at Yahoo.
Everything works, except I haven't put in the Javascript to dynamically
populate the select elements with options.
I am still writing that part.

But you can get an idea of how it's going to work.

As you can see, there is nothing hard about this code.
It uses simple (HTML, CSS & Javascript).

HTML Code:
<script>
function switch_tab(id)
{
 if(id == "tab1")
 {
  document.getElementById(id).style.background="#eeffdb";
  document.getElementById("tab2").style.background="none";
  document.getElementById("div_tab1").style.display = "block";
  document.getElementById("div_tab2").style.display = "none";
  }
 if(id == "tab2")
 {
  document.getElementById(id).style.background="#eeffdb";
  document.getElementById("tab1").style.background="none";
  document.getElementById("div_tab1").style.display = "none";
  document.getElementById("div_tab2").style.display = "block";
  }
 }
var _path1 = "";
var _path2 = "";
var _path3 = "";
function selected_option(id)
{
 if(id.options.length != 0)
 {
  if(id.name == "sel1")
  {
   _path1 = id.options[id.selectedIndex].value;
   }
  if(id.name == "sel2")
  {
   _path2 = ">" + id.options[id.selectedIndex].value;
   }
  if(id.name == "sel3")
  {
   _path3 = ">" + id.options[id.selectedIndex].value;
   }
  }
 document.getElementById("sp1").innerHTML = _path1 + _path2 + _path3;
 }
function _radio(id)
{
 if(id == "radio1")
 {
  document.getElementById(id).checked=true;
  document.getElementById("radio2").checked=false;
  document.getElementById("radio3").checked=false;
  document.getElementById("radio4").checked=false;
  document.getElementById("radio5").checked=false;
  }
 if(id == "radio2")
 {
  document.getElementById(id).checked=true;
  document.getElementById("radio1").checked=false;
  document.getElementById("radio3").checked=false;
  document.getElementById("radio4").checked=false;
  document.getElementById("radio5").checked=false;
  }
 if(id == "radio3")
 {
  document.getElementById(id).checked=true;
  document.getElementById("radio1").checked=false;
  document.getElementById("radio2").checked=false;
  document.getElementById("radio4").checked=false;
  document.getElementById("radio5").checked=false;
  }
 if(id == "radio4")
 {
  document.getElementById(id).checked=true;
  document.getElementById("radio1").checked=false;
  document.getElementById("radio2").checked=false;
  document.getElementById("radio3").checked=false;
  document.getElementById("radio5").checked=false;
  }
 if(id == "radio5")
 {
  document.getElementById(id).checked=true;
  document.getElementById("radio1").checked=false;
  document.getElementById("radio2").checked=false;
  document.getElementById("radio3").checked=false;
  document.getElementById("radio4").checked=false;
  }
 }
</script>
<div style="">
<form action="#" method="post">
 <div style="border:1px solid #000000;width:725px;height:350px;padding-top:50px;background:#fcfcfc;">
  <table style="width:523px;margin-left:123px;" cellspacing=0 cellpadding=0>
   <tr>
    <td style="width:40%;"><div id="tab1" onclick="switch_tab('tab1');" style="border:1px solid #000000;border-bottom:none;display:inline;background:#eeffdb;height:25px;width:100%;padding:5px;">May We Suggest a Category</div></td>
    <td style="width:40%;"><div id="tab2" onclick="switch_tab('tab2');" style="border:1px solid #000000;border-bottom:none;display:inline;height:25px;width:100%;padding:5px;margin-left:10px;">Browse All of Our Categories</div></td>
    <td style="border-bottom:1px solid #000000;">&nbsp;</td>
   </tr>
   <tr>
    <td colspan=3>
     <div style="border:1px solid #000000;border-top:none;padding-top:20px;padding-bottom:10px;background:#eeffdb;width:503px;">

      <!-- Content tab1 -->
      <div id="div_tab1" style="display:block;">
       <table style="border:1px solid #000000;width:100%;margin-left:10px;margin-right:10px;" cellpadding=0 cellspacing=0>
        <tr style="height:25px;">
         <td style="padding:5px;padding-right:10px;"><input type="radio" id="radio1" name="radio1" onclick="_radio('radio1');"></td><td style="padding:5px;padding-left:10px;font-size:18px;">Education & Reference > Standards & Testing</td>
        </tr>
        <tr style="height:25px;">
         <td style="background:#ffffff;padding:5px;padding-right:10px;"><input type="radio" id="radio2" name="radio2" onclick="_radio('radio2');"></td><td style="background:#ffffff;padding:5px;padding-left:10px;font-size:18px;">Health > Diseases & Conditions > STDs</td>
        </tr>
        <tr style="height:25px;">
         <td style="padding:5px;padding-right:10px;"><input type="radio" id="radio3" name="radio3" onclick="_radio('radio3');"></td><td style="padding:5px;padding-left:10px;font-size:18px;">Science & Mathematics > Engineering</td>
        </tr>
        <tr style="height:25px;">
         <td style="background:#ffffff;padding:5px;padding-right:10px;"><input type="radio" id="radio4" name="radio4" onclick="_radio('radio4');"></td><td style="background:#ffffff;padding:5px;padding-left:10px;font-size:18px;">Science & Mathematics > Biology</td>
        </tr>
        <tr style="height:25px;">
         <td style="padding:5px;padding-right:10px;"><input type="radio" id="radio5" name="radio5" onclick="_radio('radio5');"></td><td style="padding:5px;padding-left:10px;font-size:18px;">Science & Mathematics > Medicine</td>
        </tr>
       </table>
       <div style="margin-top:20px;margin-left:10px;">Or, select a different category from our <a href="#" onclick="switch_tab('tab2');">complete list</a>.</div>
      </div>

      <!-- Content tab2 -->
      <div id="div_tab2" style="display:none;">
       <table style="width:100%;margin-left:10px;margin-right:10px;">
        <tr>
         <td colspan=3 style="font-size:14px;padding-bottom:10px;">Select a category using our category browser below or view <a href="#" onclick="switch_tab('tab1');">Suggested Categories</a></td>
        </tr>
        <tr>
         <td style="width:33%;">
          <select name="sel1" size=20 style="width:100%;" onclick="selected_option(this);">
           <option value="option 1">option 1 -></option>
           <option value="o2">option 2 -></option>
           <option value="o3">option 3 -></option>
           <option value="o4">option 4 -></option>
           <option value="o5">option 5 -></option>
           <option value="o6">option 6 -></option>
           <option value="o7">option 7 -></option>
           <option value="o8">option 8 -></option>
           <option value="o9">option 9 -></option>
           <option value="o10">option 10 -></option>
           <option value="o11">option 11 -></option>
           <option value="o12">option 12 -></option>
           <option value="o13">option 13 -></option>
           <option value="o14">option 14 -></option>
           <option value="o15">option 15 -></option>
           <option value="o16">option 16 -></option>
           <option value="o17">option 17 -></option>
           <option value="o18">option 18 -></option>
           <option value="o19">option 19 -></option>
           <option value="o20">option 20 -></option>
          </select>
         </td>
         <td style="width:33%;">
          <select name="sel2" size=20 style="width:100%;" onclick="selected_option(this);">
           <option value="option 1">option 1 -></option>
           <option value="s2">option 2 -></option>
           <option value="s3">option 3 -></option>
           <option value="s4">option 4 -></option>
           <option value="s5">option 5 -></option>
           <option value="s6">option 6 -></option>
           <option value="s7">option 7 -></option>
           <option value="s8">option 8 -></option>
           <option value="s9">option 9 -></option>
           <option value="s10">option 10 -></option>
           <option value="s11">option 11 -></option>
           <option value="s12">option 12 -></option>
           <option value="s13">option 13 -></option>
           <option value="s14">option 14 -></option>
           <option value="s15">option 15 -></option>
           <option value="s16">option 16 -></option>
           <option value="s17">option 17 -></option>
           <option value="s18">option 18 -></option>
           <option value="s19">option 19 -></option>
           <option value="s20">option 20 -></option>
          </select>
         </td>
         <td style="width:33%;">
          <select name="sel3" size=20 style="width:100%;" onclick="selected_option(this);">
           <option value="option 1">option 1 -></option>
           <option value="y2">option 2 -></option>
           <option value="y3">option 3 -></option>
           <option value="y4">option 4 -></option>
           <option value="y5">option 5 -></option>
           <option value="y6">option 6 -></option>
           <option value="y7">option 7 -></option>
           <option value="y8">option 8 -></option>
           <option value="y9">option 9 -></option>
           <option value="y10">option 10 -></option>
           <option value="y11">option 11 -></option>
           <option value="y12">option 12 -></option>
           <option value="y13">option 13 -></option>
           <option value="y14">option 14 -></option>
           <option value="y15">option 15 -></option>
           <option value="y16">option 16 -></option>
           <option value="y17">option 17 -></option>
           <option value="y18">option 18 -></option>
           <option value="y19">option 19 -></option>
           <option value="y20">option 20 -></option>
          </select>
         </td>
        </tr>
        <tr>
         <td colspan=3 style="padding-left:60px;"><img src="" style="width:20px;height:20px;">You selected:&nbsp;<span id="sp1" style="font-weight:bold;"></span></td>
        </tr>
       </table>
      </div>

     </div>
     <div style="text-align:right;padding-right:20px;margin-top:50px;margin-bottom:20px;">
      <input type="submit" value="Preview" style="background:#0000ff;color:#ffffff;font-size:16px;font-weight:bold;">
     </div>
    </td>
   </tr>
  </table>
 </div>
</form>
</div>
__________________
Jerry Broughton
Reply With Quote
  #6 (permalink)  
Old 11-15-07, 05:29 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
Ok,

I have modified and completed the program.
There are three arrays in the Javascript,
sel_1
sel_2
sel_3
I have the data for the drop-down boxes loaded into these arrays.

Each array has arrays that contain 3 elements.

The first element is a pointer from the last element of the previous array.
The first array's pointer value is set to 0 because there is no previous array.

The second element is the text in the drop-down box.

The third element is the value for the drop-down box and the pointer for the next array.

You can just as easily load these arrays from a database.

I tried to make this form as close to the example you showed me.

At the top of the program I have included some PHP code so you can see what values the form sends.

If you are not using PHP to process your form, you can remove the PHP code.

Or you can remove the PHP code if you don't want it there.

I have the form submitting to itself, but you can as easily have it submit to another page.

Javascript Code:
  1. <?php
  2.  if(isset($_POST["radio"])){echo "You selected radio button : ".$_POST["radio"]."<br>";}
  3.  if(isset($_POST["sel0"])){echo "Select box sel0 = ".$_POST["sel0"]."<br>";}
  4.  if(isset($_POST["sel1"])){echo "Select box sel1 = ".$_POST["sel1"]."<br>";}
  5.  if(isset($_POST["sel2"])){echo "Select box sel2 = ".$_POST["sel2"]."<br>";}
  6. ?>
  7. <html>
  8. <head>
  9. <script>
  10. var sel_1 = new Array(
  11.                       new Array("0","Education & Reference >","1"),
  12.                       new Array("0","Health >","2"),
  13.                       new Array("0","Science & Mathematics >","3")
  14.                       );
  15. var sel_2 = new Array(
  16.                       new Array("1","Standards & Testing","1"),
  17.                       new Array("2","Diseases & Conditions >","2"),
  18.                       new Array("3","Engineering >","3"),
  19.                       new Array("3","Biology","4"),
  20.                       new Array("3","Medicine","5")
  21.                       );
  22. var sel_3 = new Array(
  23.                       new Array("2","STDs","1"),
  24.                       new Array("3","Structral","2")
  25.                       );
  26. var _path1="";
  27. var _path2="";
  28. var _path3="";
  29.  
  30. function switch_tab(id)
  31. {
  32.  if(id == "tab1")
  33.  {
  34.   document.getElementById(id).style.background="#eeffdb";
  35.   document.getElementById("tab2").style.background="none";
  36.   document.getElementById("div_tab1").style.display = "block";
  37.   document.getElementById("div_tab2").style.display = "none";
  38.   }
  39.  if(id == "tab2")
  40.  {
  41.   document.getElementById(id).style.background="#eeffdb";
  42.   document.getElementById("tab1").style.background="none";
  43.   document.getElementById("div_tab1").style.display = "none";
  44.   document.getElementById("div_tab2").style.display = "block";
  45.   }
  46.  }
  47.  
  48. function Populate_select_0()
  49. {
  50.  var OptionList=document.frmMain.sel0;
  51.  var end_loop=sel_1.length;
  52.  for(var i=0;i<end_loop;i++)
  53.  {
  54.   OptionList[OptionList.length]=new Option(sel_1[i][1],sel_1[i][2]);
  55.   }
  56.  }
  57.  
  58. function Populate_select_1(id)
  59. {
  60.  if(id.name=="sel0")
  61.  {
  62.   _path1 = id.options[id.selectedIndex].text;
  63.   _path2 = "";
  64.   _path3 = "";
  65.   var OptionList=document.frmMain.sel2;
  66.   for(var x=OptionList.length;x>=0;x--){OptionList[x]=null;}
  67.   OptionList=document.frmMain.sel1;
  68.   for(var x=OptionList.length;x>=0;x--){OptionList[x]=null;}
  69.   var OptionList=document.frmMain.sel1;
  70.   var end_loop=sel_2.length;
  71.   for(var i=0;i<end_loop;i++)
  72.   {
  73.    if(id[id.selectedIndex].value==sel_2[i][0])
  74.    {
  75.     OptionList[OptionList.length]=new Option(sel_2[i][1],sel_2[i][2]);
  76.     }
  77.    }
  78.   }
  79.  if(id.name=="sel1")
  80.  {
  81.   _path3 = "";
  82.   _path2 = id.options[id.selectedIndex].text;
  83.   var OptionList=document.frmMain.sel2;
  84.   for(var x=OptionList.length;x>=0;x--){OptionList[x]=null;}
  85.   var end_loop=sel_3.length;
  86.   for(var i=0;i<end_loop;i++)
  87.   {
  88.    if(id[id.selectedIndex].value==sel_3[i][0])
  89.    {
  90.     OptionList[OptionList.length]=new Option(sel_3[i][1],sel_3[i][2]);
  91.     }
  92.    }
  93.   }
  94.  if(id.name=="sel2")
  95.  {
  96.   _path3 = id.options[id.selectedIndex].text;
  97.   }
  98.  document.getElementById("sp1").innerHTML = _path1 + _path2 + _path3;
  99.  }
  100. </script>
  101. </head>
  102. <body onload="Populate_select_0();">
  103. <div style="">
  104. <form name="frmMain" action="#" method="post">
  105.  <div style="border:1px solid #000000;width:725px;height:350px;padding-top:50px;background:#fcfcfc;">
  106.   <table style="width:523px;margin-left:123px;" cellspacing=0 cellpadding=0>
  107.    <tr>
  108.     <td style="width:40%;"><div id="tab1" onclick="switch_tab('tab1');" style="border:1px solid #000000;border-bottom:none;display:inline;background:#eeffdb;height:25px;width:100%;padding:5px;">May We Suggest a Category</div></td>
  109.     <td style="width:40%;"><div id="tab2" onclick="switch_tab('tab2');" style="border:1px solid #000000;border-bottom:none;display:inline;height:25px;width:100%;padding:5px;margin-left:10px;">Browse All of Our Categories</div></td>
  110.     <td style="border-bottom:1px solid #000000;">&nbsp;</td>
  111.    </tr>
  112.    <tr>
  113.     <td colspan=3>
  114.      <div style="border:1px solid #000000;border-top:none;padding-top:20px;padding-bottom:10px;background:#eeffdb;width:503px;">
  115.  
  116.       <!-- Content tab1 -->
  117.       <div id="div_tab1" style="display:block;">
  118.        <table style="border:1px solid #000000;width:100%;margin-left:10px;margin-right:10px;" cellpadding=0 cellspacing=0>
  119.         <tr style="height:25px;">
  120.          <td style="padding:5px;padding-right:10px;"><input type="radio" name="radio" value="Education & Reference > Standards & Testing"></td><td style="padding:5px;padding-left:10px;font-size:18px;">Education & Reference > Standards & Testing</td>
  121.         </tr>
  122.         <tr style="height:25px;">
  123.          <td style="background:#ffffff;padding:5px;padding-right:10px;"><input type="radio" name="radio" value="Health > Diseases & Conditions > STDs"></td><td style="background:#ffffff;padding:5px;padding-left:10px;font-size:18px;">Health > Diseases & Conditions > STDs</td>
  124.         </tr>
  125.         <tr style="height:25px;">
  126.          <td style="padding:5px;padding-right:10px;"><input type="radio" name="radio" value="Science & Mathematics > Engineering"></td><td style="padding:5px;padding-left:10px;font-size:18px;">Science & Mathematics > Engineering</td>
  127.         </tr>
  128.         <tr style="height:25px;">
  129.          <td style="background:#ffffff;padding:5px;padding-right:10px;"><input type="radio" name="radio" value="Science & Mathematics > Biology"></td><td style="background:#ffffff;padding:5px;padding-left:10px;font-size:18px;">Science & Mathematics > Biology</td>
  130.         </tr>
  131.         <tr style="height:25px;">
  132.          <td style="padding:5px;padding-right:10px;"><input type="radio" name="radio" value="Science & Mathematics > Medicine"></td><td style="padding:5px;padding-left:10px;font-size:18px;">Science & Mathematics > Medicine</td>
  133.         </tr>
  134.        </table>
  135.        <div style="margin-top:20px;margin-left:10px;">Or, select a different category from our <a href="#" onclick="switch_tab('tab2');">complete list</a>.</div>
  136.       </div>
  137.  
  138.       <!-- Content tab2 -->
  139.       <div id="div_tab2" style="display:none;">
  140.        <table style="width:100%;margin-left:10px;margin-right:10px;">
  141.         <tr>
  142.          <td colspan=3 style="font-size:14px;padding-bottom:10px;">Select a category using our category browser below or view <a href="#" onclick="switch_tab('tab1');">Suggested Categories</a></td>
  143.         </tr>
  144.         <tr>
  145.          <td style="width:33%;"><select name="sel0" size=20 style="width:100%;" onChange="Populate_select_1(this);"></select></td>
  146.          <td style="width:33%;"><select name="sel1" size=20 style="width:100%;" onChange="Populate_select_1(this);"></select></td>
  147.          <td style="width:33%;"><select name="sel2" size=20 style="width:100%;" onChange="Populate_select_1(this);"></select></td>
  148.         </tr>
  149.         <tr>
  150.          <td colspan=3 style="padding-left:10px;"><img src="" style="width:20px;height:20px;">You selected:&nbsp;<span id="sp1" style="font-weight:bold;"></span></td>
  151.         </tr>
  152.        </table>
  153.       </div>
  154.  
  155.      </div>
  156.      <div style="text-align:right;padding-right:20px;margin-top:50px;margin-bottom:20px;">
  157.       <input type="submit" value="Preview" style="background:#0000ff;color:#ffffff;font-size:16px;font-weight:bold;">
  158.      </div>
  159.     </td>
  160.    </tr>
  161.   </table>
  162.  </div>
  163. </form>
  164. </div>
  165. </body>
  166. </html>
__________________
Jerry Broughton
Last edited by job0107; 11-15-07 at 05:40 PM.
Reply With Quote
Reply

Bookmarks

« Clearing EVERYTHING from the screen. | [split] HVmenu »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Multi Level Javascript Dropdown Menu lochie Script Requests 2 05-21-07 02:54 AM
multi forum need help mybb Hamed PHP 0 05-04-07 02:30 AM
Nested css lists Wordcall JavaScript 10 01-23-07 06:32 PM
User auth with level 411 PHP 4 12-23-05 11:24 AM


All times are GMT -5. The time now is 11:32 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.