lets admit we have two selects

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

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

```

So I went like this :

```js
    $(#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.