In first select I choose my species, so in next select i want choose breed from my choosen species. Example: When I choose Cat-species I want see only Ragdoll and Maine Coon in my breeds select, without Yorkshire Terrier because it is a dog. It doesn't work and I don't have any idea how to do that. Now it is : 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;
}
}