如何刷新选择字段而不刷新整页

Question

我有两个级别的下拉(select box)。

如果我选择的拳头级的东西，然后第二个下拉组将根据拳头选择

前出现：有我在第一次6级的选择，每个选择我有页面上的其他6下拉设置隐藏。作为用户选择，它将显示第二级下拉菜单。

这是第一级

<select name="TapeType" id="TapeType"> 
      <option value="s">&lt;Select&gt;</option> 
      <option value="Polypropylene Tape" id="PT">POLYPROPYLENE TAPE</option> 
      <option value="HD Polypropylene Tape">HD POLYPROPYLENE TAPE</option> 
      <option value="X HD Polypropylene Tape">X HD POLYPROPYLENE TAPE</option> 
      <option value="PVC Tape">PVC TAPE</option> 
      <option value="HD PVC TAPE">HD PVC TAPE</option> 
      <option value="Reinforced Paper Tape">REINFORCED PAPER TAPE</option> 
      <option value="Flatback Tape">FLATBACK TAPE</option> 

     </select> 

这是第二级

<select name="TapeColorPT" id="TapeColorPT" class="toggledDropDown"> 
      <option value="Tan">Tan</option> 
      <option value="White">White</option> 
      <option value="Clear">Clear</option> 
      <option value="Red">Red</option> 
      <option value="Orange">Orange</option> 
      <option value="Yellow">Yellow</option>  
     </select> 

<select name="TapeColorHPT" id="TapeColorHPT" class="toggledDropDown"> 
      <option value="Tan">Tan</option> 
      <option value="White">White</option> 
      <option value="Clear">Clear</option> 
     </select> 

两个示例对于显示每个下拉我用这个方法与js

$('.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(); 
    } 
    }}); 

我的问题是

例如：当我选择1一个第一级和我的第二个层次选择3。然后我回到第一级并选择2，因此出现另一组第二级下拉菜单。之后，当我回到第一级选择1时，我以前在第二级选择3会在那里。当我再次回来时，我希望它没有选择。

所以我想我可以做，如果有人让我知道如何刷新选择框javascript(js)而不刷新整个页面。