Javascript Sub Categories - 3 Tier
<p>I am new to programming so if there is a better way to do this I would really appreciate a suggestion. I have searched for many hours but I cannot find a solution where the 3rd item in the list is dependent on the first two.</p>

<p>My goal is to have the OS option dependent on the first 2 choices (network and resource). There are 2 networks - Internal and Firewall and the servers can also be clustered if needed. If standard is selected, physical or virtual can be chosen. If cluster is selected the only option is physical.</p>

<p>Where I am running into problems is with the OS choices. If the combination of firewall and virtual are chosen only Linux and Windows are available.  If the combination of firewall and physical are chosen, AIX, Solaris, Windows, &amp; Linux are allowed. When I click on resource to change it to physical I want the OS choices to change.</p>

<p>HTML Code
    
    
    </p>

<pre><code>&lt;div class="left_box"&gt;
    &lt;body onload="fillCategory();"&gt;
&lt;div id ="formWrapper"&gt;
&lt;FORM name="drop_list" action="availability.php" method="POST" &gt;
&lt;fieldset&gt;
&lt;label&gt;Network&lt;/label&gt;
&lt;SELECT class= "formSelect" NAME="build" onChange="SelectSubCat();" &gt;       
&lt;Option value=""&gt;Select Internal or Firewall&lt;/option&gt;
&lt;/SELECT&gt;
&lt;br&gt;
&lt;br&gt;
&lt;label&gt;Resource&lt;/label&gt;
&lt;SELECT class= "formSelect" id="resource" NAME="resource"&gt;
&lt;Option value=""&gt;Resource&lt;/option&gt;
&lt;/SELECT&gt;
&lt;br&gt;
&lt;br&gt;
&lt;label&gt;OS&lt;/label&gt;
&lt;SELECT class= "formSelect" id="OS" NAME="OS"&gt;      
&lt;Option value=""&gt;OS&lt;/option&gt;
&lt;/SELECT&gt;
&lt;br&gt;
&lt;br&gt;
&lt;/fieldset&gt;
</code></pre>

<p>Javascript Code</p>

<pre class="lang-js prettyprint-override"><code>function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.build, "Internal", "Internal", "");
addOption(document.drop_list.build, "Internal Cluster", "Internal Cluster", "");
addOption(document.drop_list.build, "Firewall", "Firewall", "");
addOption(document.drop_list.build, "Firewall Cluster", "Firewall Cluster", "");
}

function SelectSubCat(){
// ON selection of category this function will work
removeAllOptions(document.drop_list.resource);
removeAllOptions(document.drop_list.OS);

if((document.drop_list.build.value == 'Internal')||(document.drop_list.build.value == 'Firewall')){
addOption(document.drop_list.resource,"Virtual", "Virtual","");
addOption(document.drop_list.resource,"Physical", "Physical","");
}

if((document.drop_list.build.value == 'Internal Cluster') || (document.drop_list.build.value     == 'Firewall Cluster')) {
addOption(document.drop_list.resource,"Physical", "Physical");
}

if(document.drop_list.build.value == 'Internal') {
addOption(document.drop_list.OS,"AIX 6.1", "AIX 6.1");
addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
addOption(document.drop_list.OS,"Solaris 10", "Solaris 10");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Standard", "Windows 2008 (64-bit) Standard");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit)   Enterprise");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Standard", "Windows 2008 R2 (64-bit)  Standard");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
addOption(document.drop_list.OS,"Special", "Special");
}

if((document.drop_list.build.value == 'Internal Cluster') ||(document.drop_list.build.value == 'Firewall Cluster')){
addOption(document.drop_list.OS,"AIX 6.1", "AIX 6.1");
addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
addOption(document.drop_list.OS,"Solaris 10", "Solaris 10");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit) Enterprise");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
}

if((document.drop_list.build.value == 'Firewall') &amp;&amp; (document.drop_list.resource.value == 'Virtual')) {
addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit) Enterprise");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
}

if((document.drop_list.build.value == 'Firewall') &amp;&amp; (document.drop_list.resource.value == 'Physical')) {
addOption(document.drop_list.OS,"AIX 6.1", "AIX 6.1");
addOption(document.drop_list.OS,"Linux 5.0 (64-bit)", "Linux 5.0 (64-bit)");
addOption(document.drop_list.OS,"Linux 6.0 (64-bit)", "Linux 6.0 (64-bit)");
addOption(document.drop_list.OS,"Solaris 10", "Solaris 10");
addOption(document.drop_list.OS,"Windows 2008 (64-bit) Enterprise", "Windows 2008 (64-bit) Enterprise");
addOption(document.drop_list.OS,"Windows 2008 R2 (64-bit) Enterprise", "Windows 2008 R2 (64-bit) Enterprise");
}

} 

////////////////// 

function removeAllOptions(selectbox)
{
    var i;
    for(i=selectbox.options.length-1;i&gt;=0;i--)
{
    //selectbox.options.remove(i);
    selectbox.remove(i);
}
} 


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

selectbox.options.add(optn);
}
</code></pre>
