Triple drop down menu with the Dewey Decimal Classification

Question

The Dewey Decimal Classification (DDC) is a really useful method to classify books and texts. So I'm trying to find a triple drop down menu that implements it. I googled it in many different ways but couldn't find any.

I've seen long time ago the double drop down menu and recently the triple drop down menu, so I COULD implement this for myself. Thought my lucky guess is, not knowing too much about javascript, that I could spend MANY hours of really hard work to implement it.

Therefore, my question. Do you know where I can find an already made javascript code for a dropdown menu implementing the DDC? Also, it needs NOT to redirect to another page when you select all the fields since it's for a submit page where other fields are required. This could be hacked thought.

If instead of the DDC you posted some code with the Universal Decimal Classification that'd also be valid. It's just I prefer the DDC.

If I don't find it anywhere, I'll try to do it myself and publish the code.

It should work in this way: The first drop down has these options:

• Computer science, information and general works
• Philosophy and psychology
• Religion
• Social sciences
• Language
• Science (including mathematics)
• Technology and applied science
• Arts and recreation
• Literature
• History and geography

If you selected, let's say, "Science", then the second drop down menu would acquire these values:

• Sciences
• Mathematics
• Astronomy & allied sciences
• Physics
• Chemistry & allied sciences
• Earth sciences
• Paleontology; Paleozoology
• Life sciences
• Plants
• Zoological sciences/Animals

And let's say that now you choosed "Physics", then the third drop-down menu would be like this:

• Classical mechanics; Solid mechanics
• Fluid mechanics; Liquid mechanics
• Gas mechanics
• Sound & related vibrations
• Light & paraphotic phenomena
• Heat
• Electricity & electronics
• Magnetism
• Modern physics

If you selected "Heat", then the value of the drop down menu would be: opt1=5, opt2=3, opt3=6, as "Heat" corresponds to 536.

You can see the full structure in Wikipedia.

Answer 1

It took less time than expected as javascript 'advanced' code was really similar to other programming languages. Just about 20h with the help of some bash script not to do repetitive tasks manually. I really DON'T think it's a good idea to paste about 3000 lines of javascript here, so, as I requested in the first place, I post the html here and also THIS LINK to the ddc.js. Also, you can test it here and see the explanation there. Both links are from my page and there's some light php involved that I won't post as it's not too relevant (explained in the second link in the NOTE).

Html:

<script language="JAVASCRIPT" src="ddc.js" type="text/javascript"></script>
<h1>Dewey Decimal Classification</h1><br><br>
    <form style="text-align: center;" onLoad="msDDC()" name="formDDC" method="POST">
        <select name="classesDDC" style="width: 300px; height: 24px; font-size: 14px;" onChange="changeDivisions()">
        <option value="">Select a class</option>
        <option value="0">0. Computer science, knowledge & systems</option>
        <option value="1">1. Philosophy and psychology</option>
        <option value="2">2. Religion</option>
        <option value="3">3. Social sciences</option>
        <option value="4">4. Language</option>
        <option value="5">5. Science</option>
        <option value="6">6. Technology</option>
        <option value="7">7. Arts</option>
        <option value="8">8. Literature</option>
        <option value="9">9. History, geography & biography</option>
    </select><br><br>
    <select name="divisionsDDC" style="width: 300px; height: 24px; font-size: 14px;" onChange="changeSections()">
        <option value="">Divisions will appear here</option>
    </select><br><br>
    <select name="sectionsDDC" style="width: 300px; height: 24px; font-size: 14px;">
        <option value="">Sections will appear here</option>
    </select><br><br>
    <input type="submit" value="Go!" style="width: 300px; height: 24px; font-size: 14px;">
    </form>

Answer 2

The non-AJAXy approach would be to just load everything on the same page. No AJAX requried for the menus, only very simple JavaScript. The page would be much larger, but not prohibitively so I don't think, and the relevant code could be put into a separate .js file which could then be cached client-side, and need only be downloaded once.

Answer 3

Doing a search I found this page where a person has essentially an identical question. There is a response, by a user named essential. He seems to take the obvious approach, AJAX, and the original questioner seemed to think it did the trick.

The response goes like this:

---

This can be achieved if you prefer using AJAX in your page. To get the basic of it, here's a simple demo for you.

This example comes in 2 separated html document: the main.html which holds the entire script, and the request.html that holds another options and will be injected to the main.html upon request.

Here's the code for the main.html:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>
<script type="text/javascript">
// <![CDATA[
/* No editing required -
   For demonstrational purposes only. */


// Declaring variables
var ajax, update, xmlData, getOptions;
var obj, select, option;

// This is a simple prototype that will skip the long declaration of ( element.getElementsByTagName( tagName )[reference] ).
// And now can be defined as element.obj( tagName, reference )
obj = Object.prototype.obj = function( tn, ref ) {
   if (( tn ) && ( typeof ref === "number" ) && ( ref !== null )) {
   return ( this.getElementsByTagName( tn )[ ref ] );
   } else {
   return (  this.getElementsByTagName( tn ));
   } 
};

// This is the function reference which is the one who handle's and process the request sent by the XMLHttpRequest object.

// And considered as the most important part of the whole program. 
getOptions = function() {
select = xmlData.responseXML.obj("select", 0)
option = select.obj("option");
oLen = option.length;
   for ( x = 0; x < oLen; x++ ) { document.obj("select")["lists"].remove( x );
document.obj("select")["lists"].add( new Option( option[x].childNodes[0].nodeValue,  option[x].getAttribute("value") ), x );
   }
};

ajax = function ( url ) {
xmlData = null;
   if ( window.XMLHttpRequest ) {
   xmlData = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
      try {
      xmlData = new ActiveXObject("Microsoft.XMLHTTP");
      } catch( e ) {
          xmlData = new ActiveXObject("Msxml2.XMLHTTP");
      }
   }
   if ( xmlData !== null ) {
   xmlData.onreadystatechange = getOptions; 
   xmlData.open("GET", url, true);
   xmlData.send( null );
   } else {
     alert("\nYour browser does not support AJAX Request!"); 
   }
};

update = function( sel ) {
sel = ( document.getElementById ) ? document.getElementById( sel ) : document.all.sel;

index = sel.selectedIndex;

ajax( sel.options[index].value );
return;
}
// ]]>
</script>
</head>
<body>
<div id="content">
<form id="ajaxForm" action="#" onsubmit="return false;">
<div>
<select id="lists" name="lists" size="1" onchange="update( this.id );">
<option value="">Default List</option>
<option value="">Default List</option>
<option value="">Defaut List</option>
<option value="request.html">AJAX Demo - Request Lists!</option>
</select>
</div>
</form>  
</div>
</body>
</html>

And this goes for therequest.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Request Page</title>
  </head>
  <body>
    <div id="content">
      <form id="frm" action="*" onsubmit="return false;">
        <div>
          <select id="sel" name="sel" size="1" onchange="ajax.listed(this.id);">
            <option value="">Requested List</option>
            <option value="">Requested List</option>
            <option value="">Requested List</option>
            <option value="main.html">AJAX Demo - Default Page!</option>
          </select>
        </div>
      </form>
    </div>
  </body>
</html>