admitamos que tenemos dos selecciones
<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> Quiero que la segunda selección no ofrezca valores que sean mayores que el valor seleccionado en la primera selección, por lo que si, por ejemplo, en la primera selección seleccioné 3 , la segunda selección debería ofrecer
<select id=second> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>Así que fui así:
$(#first).on('change', function() { var min = $(#first).val(); for (let i = 1; i <= min; i++) { $(#second).append('<option value=' + i + '>' + i + '</option>'); } });Pero esto añade opciones. Quiero reemplazar las opciones.
Puede eliminar todas las etiquetas <option> primero usando .empty() y luego agregar nuevas etiquetas <option> por bucle:
$('#first').on('change', function() { $('#second').empty(); var min = $('#first').val(); for (let i = 1; i <= min; i++) { $('#second').append('<option value=' + i + '>' + i + '</option>'); } });Enfoque diferente en el que almacena un conjunto de opciones y filtra el conjunto para reemplazar el existente con
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>