Javascript to Dynamically Populate Select Lists not working properly
<p>I am new to JavaScripting. I have written a Javascript to dynamically populate the select list based on the selection of the option in another selection box. </p>

<p>The script is having 3 selection box. Depending on the selection of option in first selection box, the second selection box should be populated and depending on the selection of option in second selection box, the third selection box should be populated.</p>

<p>But the script I have written is giving 2 problems:
1] If the page is reloaded, the option in the first selection box selected previously remains selected and if we press the same option again to load the second selection box, the second selection box do not get loaded with its options. We have to select some other option in the first selection box and then select the option from the first selection box that we wanted to select previously.</p>

<p>2] If I select an option from second selection box, then the third selection box shows the options for the second selection box's selected option and it also shows some options (specially few last options) of the previously selected option from second selection box.</p>

<p>e.g. if second selection box has options - maharashtra, punjab, gujarat
and in the third selection box i want to show Mumbai, Pune, Nagpur, Nasik, Sangli for Maharashtra option, Ludhiana, Amritsar and Patiala for Punjab option and Gandhinagar, Surat, Ahmedabad, Bhavnagar and Jamnagar. 
if I press maharashtra option first then all options will be shown properly, but after selecting punjab option, along with Ludhiana, Amritsar and Patiala, Nasik and Sangli option will also be shown in the third selection box. </p>

<p>I hope I get some help from the expert people like you. Please have a look at my script and let me know, what is wrong with it.</p>

<p>My javascript is as follows</p>

<hr>

<pre><code>&lt;script type="text/javascript"&gt;

 function selectProduct()
 {
   var Eclipse=new Array("e4","Incubator","JDT","Orion","PDE","Platform");

   var selectedBoxValue=document.queryform.project.value;
   var i;
   var j;

   removeSelectboxOption();
   var productLength=eval(selectedBoxValue).length;

   for(i=0;i&lt;document.queryform.project.options.length;i++)
   {
    if(selectedBoxValue==document.queryform.project.options[i].value)
    {
      for(j=0;j&lt;productLength;j++)
      {
        document.queryform.product.options[j]=new Option(eval(selectedBoxValue)[j],eval(selectedBoxValue)[j])
      }
    }
   }
 }

 function selectComponent()
 {
   var e4 = new Array("Languages", "Resources", "Runtime", "Search", "SWT", "TM", "UI", "XWT","");
   var Incubator = new Array("e4", "ufacekit","");
   var JDT = new Array("APT", "Core", "Debug", "Doc", "Text", "UI","");
   var Orion = new Array("Client", "Doc", "Editor", "Git", "OrionHub", "Releng", "Server","");
   var PDE = new Array("API Tools", "Build", "Doc", "Incubators", "UI","");
   var Platform = new Array("Ant", "Compare", "CVS", "Debug", "Doc", "IDE", "Incubator", "PMC", "Releng", "Resources", "Runtime", "Scripting", "Search", "SWT", "Team", "Text", "UI", "Update  (deprecated - use RT\x3eEquinox\x3ep2)", "User Assistance", "WebDAV", "Website","");

   var selectedBoxValue=document.queryform.product.value;
   var i;
   var j;

   removeSelectboxOption1();
   var componentLength=eval(selectedBoxValue).length;

   for(i=0;i&lt;document.queryform.product.options.length;i++)
   {
    if(selectedBoxValue==document.queryform.product.options[i].value)
    {
      for(j=0;j&lt;componentLength;j++)
      {
        document.queryform.component.options[j]=new Option(eval(selectedBoxValue)[j],eval(selectedBoxValue)[j])
      }
    }
   }
 }

function removeSelectboxOption()
 {
   var i;
   for(i=0;i&lt;document.queryform.product.options.length;i++)
   {
    document.queryform.product.remove(i);
   }
 }

function removeSelectboxOption1()
 {
   var i;
   for(i=0;i&lt;document.queryform.component.options.length;i++)
   {
    document.queryform.component.remove(i);
   }
 }

&lt;/script&gt;

div id="container_project" class="search_field_grid"&gt;
&lt;label&gt;Project: &lt;/label&gt;
      &lt;select name="project" id="project" onchange="selectProduct()" style="width:200px; height:150px" multiple="multiple"&gt;
            &lt;option value="" selected="selected"&gt; &lt;/option&gt;
            &lt;option value="Eclipse"&gt;Eclipse &lt;/option&gt;
      &lt;/select&gt;
&lt;/div&gt;
&lt;br/&gt;&lt;br/&gt;
&lt;div id="container_product" class="search_field_grid"&gt;
&lt;label&gt;Product: &lt;/label&gt;
      &lt;select name="product" id="product" onchange="selectComponent()" style="width:200px; height:150px" multiple="multiple"&gt;
      &lt;/select&gt;
&lt;/div&gt;

&lt;br/&gt;&lt;br/&gt;
&lt;div id="container_component" class="search_field_grid"&gt;
&lt;label&gt;Component: &lt;/label&gt;
      &lt;select name="component" id="component" style="width:200px; height:150px" multiple="multiple"&gt;
      &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<hr>
