如何在不刷新整页的情况下刷新所选字段

how to refresh select field without refreshing full page

本文关键字：刷新 情况下 字段      更新时间：2023-09-26

我有两层下拉(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>

这是两个二级

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

my issue is

示例:当我在第一层选择1，在第二层选择3时。然后我回到第一层，选择2，这样就出现了另一组第二层的下拉列表。之后，当我回到第一关选择1时，我之前在第二关选择的3会在那里。当我再次返回时，我希望它是选中none。

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

你可以试着这样修改你的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;
    }
});

试着把你的第一行代码也放在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();
 }
 }});

相关文章：