Consider having two dropdown menus
<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 need the second dropdown to only display values less than or equal to the selected value in the first dropdown. For instance, if I choose 3 in the first dropdown, then the options in the second dropdown should be:
<select id=second>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
This is what I have tried so far:
$(#first).on('change', function() {
var min = $(#first).val();
for (let i = 1; i <= min; i++) {
$(#second).append('<option value=' + i + '>' + i + '</option>');
}
});
However, this code appends options instead of replacing them. I am looking to replace the options instead.