En la primera selección, elijo mi especie, por lo que en la próxima selección quiero elegir la raza de mi especie elegida. Ejemplo: Cuando elijo Cat-species quiero ver solo Ragdoll y Maine Coon en mi selección de razas, sin Yorkshire Terrier porque es un perro. No funciona y no tengo ni idea de cómo hacerlo. Ahora es: ERR_INCOMPLETE_CHUNKED_ENCODING 200

HTML:

 <div class="form-row"> <div class="form-group col-md-6 text-center"> <label for="species-create" th:text="#{animal.species}"></label> <select id="species-create" class="form-control"> <option th:each="species : ${speciesDict}" th:value="${species.id}" th:text="${species.value}"> </option> </select> </div> <div class="form-group col-md-6 text-center"> <label for="breed-create" th:text="#{animal.breed}"></label> <select id="breed-create" class="form-control"> <option th:each="breed : findBreeds()" th:value="${breed.id}" th:text="${breed.value}"> </option> </select> </div> </div>

JavaScript

 function findBreeds() { $.ajax({ url: "/admin/api/breeds?" + prepareBreedsUrl(), type: "get", dataType: "json", contentType: "application/json" }) .done(function (response) { return response; }) .fail(function(jqxhr, textStatus, errorThrown){ displayErrorInformation(jqxhr.responseText); }); } function prepareBreedsUrl(){ var species = $("#species-create").find(":selected").val(); if (species != "") { url += "&species=" + species; } }