jquery - $(this).remove() not working with each() function

user_12349856 0
Viewed 192

I have two dropdowns

  • Age(from)
  • Age(to)

when I select the age from value from first dropdown list I want only the ages greater than that age to be displayed in the second dropdown list. So I want to remove all ages less than or equal to the first value that I selected from the first one.

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

Here using each function I'm able to iterate through all the values in the select(id = age_to) but somehow not able to remove the options.

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

Any help will be appreciable. Thank you

codeigniter php jquery
3 Answers

It seems to work fine for me. However, when you remove the items in the "to" dropdown, it prevents that list from working when the user selects a younger "from" age. Instead of removing the invalid items from the "to" list, I suggest you hide them instead, and show them when they are valid:

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

Your code is working perfectly, There is no error. And the result is according to your needs. Here is your code demo.

$('#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>

You can check your browser console for any error. Maybe you're missing including JQuery in your file.

Morover Instead of removing the extra option from the to list, you should hide them instead. Because if the user select 40 and then select 20, all options will not be there as it was removed. Here is the demo you can try:

$('#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>

user_59001890

You are probably better off by not remove()-ing the unused options since you might want to see them again, after the first select box changes back to smaller values. The following will do what you want (I hope).

$('#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>

I introduced the line

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

to make sure that the first available option will be selected after the filtering in the previous line has happened. .toggle(arg) will make the current element visible if the argument arg is true or hide it if it is false.

user_26100610
Related