Tenho um Jquery responsável por popular um select baseado no valor de outro select, resolvi a questão com sucesso utilizando o seguinte código:
$("#tipoProcedimento").change(function(){
$("#procedimento").empty();
$("#procedimento").attr("disabled", true);
$.ajax('http://localhost:8000/backoffice/agendamentos/procedimentos-grupos/'+$(this).val()+'/procedimentos',
{
success: function (data)
{
console.log(data);
$("#procedimento").empty();
$("#procedimento").append($("<option />").val('').text('SEM PROCEDIMENTO ESPECIFICO...'));
$.each(data.procedimentos, function() {
$("#procedimento").append($("<option />").val(this.nr_seq_proc_interno).text(this.desc_procedimento_busca1));
});
$("#procedimento").attr("disabled", false);
},
error: function (data)
{
console.log('err -> '.data)
$("#procedimento").attr("disabled", true);
}
});
})
Porém, hoje tenho a necessidade de utilizar o mesmo código em outra página pra 4 selects diferentes, o que me levou a conclusão de que a melhor forma de fazer isso, seria transformando os nomes dos respectivos selects em variáveis, a fim de NÃO REPETIR CÓDIGO xD... Assim eu seria capaz de chamar a função pra cada select da seguinte forma:
$("#tipoProcedimento").change(carregarProcedimentos('#procedimento','#tipoProcedimento'))
$("#select2").change(carregarProcedimentos('#selectSecundario2','#select2'))
$("#select3").change(carregarProcedimentos('#selectSecundario3','#select3'))
...
Porém ao chamar a função desta segunda forma, por algum motivo ela é acionada assim que a página carrega, comportamento do qual não acontecia da forma anterior !!! E sinceramente, estou confuso ao compreender o porque disso... Achei que teria algo a ver com chamar a função de maneira assincrona, não consegui resolver desta forma também... Então aqui estou (: