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

Question

我有两层下拉菜单(选择框)。

如果我在第一级选择某些内容，那么将根据第一级选择出现第二个下拉列表

例如:我在第一层有 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>

这是第二级的两个示例

01

<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>

02

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

});