jquery - $(this).remove() 不适用于 each() 函数

Posted 2023-05-07

【中文标题】jquery - $(this).remove() 不适用于 each() 函数

【英文标题】：jquery - $(this).remove() not working with each() function

【发布时间】：2021-01-20 22:44:04

【问题描述】：

我有两个下拉菜单

年龄（从） 年龄（到）

当我从第一个下拉列表中的值中选择年龄时，我只希望大于该年龄的年龄显示在第二个下拉列表中。所以我想删除小于或等于我从第一个中选择的第一个值的所有年龄。

$('#age_from').change(function()
    var val = $(this).children('option:selected').val();
    
    $('#age_to').children().each(function()
        
        if($(this).val() <= val)
            $(this).remove();
        
    ); 
);

在这里使用每个函数，我能够遍历 select(id = age_to) 中的所有值，但不知何故无法删除选项。

<div class="height_item"style="margin-left: 10px;">
    <h4 style="margin-right: 19px !important;">From (age)</h4>
    <select class="selectpicker" name="age_from" id="age_from">
        <option>20</option>
        <option>30</option>
        <option>40</option>
    </select>
</div><br><br>
<div class="height_item">
    <h4 style="margin-right: 41px !important;">To (age)</h4>
    <select class="selectpicker" name="age_to" id="age_to">
        <option>25</option>
        <option>35</option>
        <option>55</option>
    </select>
</div>

任何帮助都将不胜感激。谢谢

【参考方案1】：

这对我来说似乎工作得很好。但是，当您删除“to”下拉列表中的项目时，当用户选择较年轻的“from”年龄时，它会阻止该列表工作。我建议您不要从“收件人”列表中删除无效项目，而是隐藏它们，并在它们有效时显示它们：

if($(this).val() <= val)
    $(this).hide();
 else 
    $(this).show();

【参考方案2】：

您的代码运行良好，没有错误。结果是根据您的需要。 这是您的代码演示。

$('#age_from').change(function()
    var val = $(this).children('option:selected').val();
    
    $('#age_to').children().each(function()
        
        if($(this).val() <= val)
            $(this).remove();
        
    ); 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="height_item"style="margin-left: 10px;">
    <h4 style="margin-right: 19px !important;">From (age)</h4>
    <select class="selectpicker" name="age_from" id="age_from">
        <option>20</option>
        <option>30</option>
        <option>40</option>
    </select>
</div><br><br>
<div class="height_item">
    <h4 style="margin-right: 41px !important;">To (age)</h4>
    <select class="selectpicker" name="age_to" id="age_to">
        <option>25</option>
        <option>35</option>
        <option>55</option>
    </select>
</div>

您可以检查浏览器控制台是否有任何错误。也许您在文件中缺少包含 JQuery。

Morover 而不是从 到 列表，您应该隐藏它们。因为如果用户选择40，然后选择20，所有选项都将不存在，因为它被删除了。这是您可以尝试的演示：

$('#age_from').change(function()
    var val = $(this).children('option:selected').val();
    
    $('#age_to').children().each(function()
        
        if($(this).val() <= val)
            $(this).hide();
         else 
            $(this).show();
        
    ); 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="height_item"style="margin-left: 10px;">
    <h4 style="margin-right: 19px !important;">From (age)</h4>
    <select class="selectpicker" name="age_from" id="age_from">
        <option selected disabled>Select From Age</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
    </select>
</div><br><br>
<div class="height_item">
    <h4 style="margin-right: 41px !important;">To (age)</h4>
    <select class="selectpicker" name="age_to" id="age_to">
        <option selected disabled>Select To Age</option>
        <option>25</option>
        <option>35</option>
        <option>55</option>
    </select>
</div>

【参考方案3】：

您最好不要remove()-ing 未使用的选项，因为您可能希望在第一个选择框变回较小的值后再次查看它们。以下将做你想要的（我希望）。

$('#age_from').change(function()
  var first=false;
  $('#age_to option').each((i,o)=>
    $(o).toggle(this.value<o.value);
    if (!first && this.value<o.value) first=o.selected=true;
  )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="height_item"style="margin-left: 10px;">
    <h4 style="margin-right: 19px !important;">From (age)</h4>
    <select class="selectpicker" name="age_from" id="age_from">
        <option>20</option>
        <option>30</option>
        <option>40</option>
    </select>
</div><br><br>
<div class="height_item">
    <h4 style="margin-right: 41px !important;">To (age)</h4>
    <select class="selectpicker" name="age_to" id="age_to">
        <option>25</option>
        <option>35</option>
        <option>55</option>
    </select>
</div>

我介绍了这条线

 if (!first && this.value<o.value) first=o.selected=true;

确保在上一行中的过滤发生后选择第一个可用选项。如果参数arg 为真，.toggle(arg) 将使当前元素可见，如果为假，则隐藏它。