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

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)而不刷新整个页面。

Answer 1

你可以尝试修改您的js函数到这一点：

$('#TapeType').change(function() { 

    //you will hide the second and third level 
    $('.toggledDropDown').hide(); 

    //here i reset the second and third level to defaults by selecting the top one 
    $('#TapeColorPT,#TapeColorHPT').attr('value','Tan'); 

    //here get the value od the first dropdown 
    var tapeTypeVal = $('#TapeType').val(); 

    //here i switch for the 6 option of the first dropdown to know which dropdown will 
    //be appear 
    switch (tapeTypeVal) { 
    case 'POLYPROPYLENE TAPE': 
     $('#TapeColorPT').show(); 
     break; 
    case 'HD Polypropylene Tape': 
     $('#TapeColorHPT').show(); 
     break; 
    } 

}); 

Answer 2

尝试把你的代码最上面一行还onchange事件处理程序的身体内部：

$('.toggledDropDown').hide(); /* existing top line of code can remain here */ 

$('#TapeType').change(function() {    
$('.toggledDropDown').hide(); /* but also add it right here */ 
if ($('#TapeType option:selected').text() == "POLYPROPYLENE TAPE"){ 
    $('#TapeColorPT').show(); 

} 
... 

完整代码

$('.toggledDropDown').hide(); 

$('#TapeType').change(function() {    

$('.toggledDropDown').hide(); /* adding this line here is the only change */ 

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