title: how to refresh select field without refreshing full page
body: <p>I have two levels of drop down <code>(select box)</code>.</p>
  
  <p>If i select something on fist level then second drop down set will appear according to fist selection </p>
  
  <p>ex: I have 6 selection on first level, for each selection i have another 6 drop down set hide on page. as user selection it will show second level drop down. </p>
  
  <p>this is first level</p>
  
  <pre><code>&lt;select name="TapeType" id="TapeType"&gt;
              &lt;option value="s"&gt;&amp;lt;Select&amp;gt;&lt;/option&gt;
              &lt;option value="Polypropylene Tape" id="PT"&gt;POLYPROPYLENE TAPE&lt;/option&gt;
              &lt;option value="HD Polypropylene Tape"&gt;HD POLYPROPYLENE TAPE&lt;/option&gt;
              &lt;option value="X HD Polypropylene Tape"&gt;X HD POLYPROPYLENE TAPE&lt;/option&gt;
              &lt;option value="PVC Tape"&gt;PVC TAPE&lt;/option&gt;
              &lt;option value="HD PVC TAPE"&gt;HD PVC TAPE&lt;/option&gt;
              &lt;option value="Reinforced Paper Tape"&gt;REINFORCED PAPER TAPE&lt;/option&gt;
              &lt;option value="Flatback Tape"&gt;FLATBACK TAPE&lt;/option&gt;
  
          &lt;/select&gt;
  </code></pre>
  
  <p>This is two example of second level</p>
  
  <p>01</p>
  
  <pre><code>&lt;select name="TapeColorPT" id="TapeColorPT" class="toggledDropDown"&gt;
              &lt;option value="Tan"&gt;Tan&lt;/option&gt;
              &lt;option value="White"&gt;White&lt;/option&gt;
              &lt;option value="Clear"&gt;Clear&lt;/option&gt;
              &lt;option value="Red"&gt;Red&lt;/option&gt;
              &lt;option value="Orange"&gt;Orange&lt;/option&gt;
              &lt;option value="Yellow"&gt;Yellow&lt;/option&gt;      
        &lt;/select&gt;
  </code></pre>
  
  <p>02</p>
  
  <pre><code>&lt;select name="TapeColorHPT" id="TapeColorHPT" class="toggledDropDown"&gt;
              &lt;option value="Tan"&gt;Tan&lt;/option&gt;
              &lt;option value="White"&gt;White&lt;/option&gt;
              &lt;option value="Clear"&gt;Clear&lt;/option&gt;
        &lt;/select&gt;
  </code></pre>
  
  <p>For show each drop down i use this method with js</p>
  
  <pre><code>$('.toggledDropDown').hide();
  
   $('#TapeType').change(function () {             
  
      if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){
          $('#TapeColorPT').show();
  
      }
       else { 
            $('#TapeColorPT').hide();
  
  if ($('#TapeType option:selected').val() == "HD Polypropylene Tape"){
          $('#TapeColorHPT').show();      
      }
       else { 
            $('#TapeColorHPT').hide();
       }
       }});
  </code></pre>
  
  <p>my issue is </p>
  
  <p>example : when i select 1 one first level and i select 3 on second level. then i go back to first level and select 2, so another set of second level drop down appear. After that when i go back to select 1 on first level my previous selection of 3 on second level will be there. I want it to be select none when i come back to it again. </p>
  
  <p>so i think this i can do if some one let me know how to refresh selection box with <code>javascript(js)</code> without refreshing full page. </p>