Manipulate Select options with ajax-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

Different approach where you store a set of the options and filter the set to replace existing with

const $storedOpts = $('#second option').clone()

$('#first').change(function(){
    const $opts = $storedOpts .clone().filter((i,el) => el.value <= this.value)
    $('#second').html($opts);      
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>