Tengo un problema que no me ocurre en todos los documentos, en este caso tengo tres selects anidados en cascada funciona correctamente si selecciona las opciones con el click pero necesito que al cargar el documento me tome una opción por defecto y esta a su vez actualice las opciones de los otros dos selects, pero no funciona si no únicamente al dar click sobre la opción.
En el html tengo esto:
<div class="form-group">
<label for="ps_dewey"> 1er Dewey</label>
<select id="ps_dewey_id" name="ps_dewey_id"
class="form-select block w-full mt-1 rounded border-gray-300">
@foreach ($ps_deweys as $ps_dewey)
<option value="{{ $ps_dewey->id }}">{{ $ps_dewey->nombre }}
</option>
@if ($dewey_defecto == $ps_dewey->id) <input id="dewey" type="hidden" value="{{$dewey_defecto}}"> @endif
@endforeach
</select>
</div>
<div class="form-group">
<label for="ss_dewey"> 2do Dewey</label>
<select id="ss_dewey_id" name="ss_dewey_id"
class="form-select block w-full mt-1 rounded border-gray-300"></select>
</div>
<div class="form-group">
<label for="ts_dewey"> 3er Dewey</label>
<select id="ts_dewey_id" name="ts_dewey_id"
class="form-select block w-full mt-1 rounded border-gray-300"></select>
</div>
Cargo todos los datos desde el controlador y mando el dato que le corresponde por defecto para ese caso en especifico, mediante el @if lo valido y se lo asigno a una input oculto.
De hecho el campo el select si coloca el valor que le asigne pero no efectua los cambios en los otros selects anidados.
He intentado varias formas de ejecutar el evento de cambio que si funciona al seleccionar la opcion manualmente.
$(document).ready(function() {
$("#ps_dewey_id").val($("#dewey").val()).trigger('select');
});
Este es el evento que necesito ejecutar.
$('#ps_dewey_id').on('change', function() {
let id = $(this).val();
$('#ss_dewey_id').empty();
$('#ts_dewey_id').empty();
$('#ss_dewey_id').append(`<option value="none" hidden selected></option>`);
$.ajax({
type: 'GET',
url: 'ss_dewey/' + id,
success: function(response) {
var response = JSON.parse(response);
$('#ss_dewey_id').empty();
$('#ss_dewey_id').append(
`<option value="none" hidden selected></option>`);
response.forEach(element => {
$('#ss_dewey_id').append(
`<option value="${element['id']}">${element['nombre']}</option>`
);
});
}
});
});