Javascript Sub Categories - Clearing Selections
<p>This is an additional question regarding sub categories. The current problem is that when I change options the function to clear the OS list is not working and it conntinues to grow as changes are made.  I tried adding the remove function everywhere and it still does not work.  To recreate the issue, select internal for network and then look at the OS list.  Select physical for resource and then look at the OS list.  I have a function called removeAllOptions in the list.js file that is not clearing the OS selections when the resource is changed.  It does work when the network is changed. Any ideas are much appreciated.</p>

<p>Thanks,
Ray</p>

<p><a href="http://jsfiddle.net/7ey8E/1/" rel="nofollow">JS Fiddle</a></p>

<p><strong>index.php</strong></p>

<pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;

    &lt;head&gt;
    &lt;script language="javascript" src="list.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;head&gt;
   &lt;script language="javascript" src="list.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&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="selectResource();"&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" 
          onChange="selectOS(this);"&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><strong>list.js</strong></p>

<pre><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 selectResource(){
// 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");
}
    selectOS();
}
function selectOS(el){

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>
