Manipulate Select options with ajax

January 1, 2022

lets admit we have two selects

<select id=first>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

<select id=second>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

I want that the second select should not offer values that are bigger then the selected value in the first select, so if for example in the first select I selected 3 then the second select should offer

<select id=second>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

So I went like this :

    $(#first).on('change', function() {
        var min = $(#first).val();
        for (let i = 1; i <= min; i++) {
           $(#second).append('<option value=' + i + '>' + i + '</option>'); 
        } 
    });

But this appends options. I want to replace the options.

>Solution :

You can remove all <option> tags first by using .empty() and then append new <option> tags by loop:

    $('#first').on('change', function() {
        $('#second').empty();
        var min = $('#first').val();
        for (let i = 1; i <= min; i++) {
            $('#second').append('<option value=' + i + '>' + i + '</option>');
        }
    });