Change Dynamically Options then Select an Option - php

Question

I'm now able to change the options dynamically using jQuery. The code below will change the breed options depending on the species selected:
<div class="pet-group">
<div class="form-group">
<select class="species">
<option value="1">Dog</option>
<option value="2">Cat</option>
</select>
</div>
<div class="form-group">
<select class="breed">
</select>
</div>
</div>
<script>
$(document).on("change", ".species", function(){
var elem = $(this),
speciesid = elem.val();
$.get("http://localhost/Vet/get_breeds/"+speciesid, function( result ) {
elem.closest('.form-group').find('.breed').html(result.breed_opts);
}, "json" );
});
</script>
But when a specific pet has been selected, I want the fields to be filled-in with data of the existing pet.
<div class="pet-group">
<div class="form-group">
<select class="pet">
<option value="1">Akamaru</option> <!-- e.g., Akamaru is a dog with Pug as the breed type -->
<option value="2">Nina</option> <!-- e.g., Nina is a dog with Great Pyrenees as the breed type -->
</select>
</div>
<div class="form-group">
<select class="species">
<option value="1">Dog</option>
<option value="2">Cat</option>
</select>
</div>
<div class="form-group">
<select class="breed">
</select>
</div>
</div>
<script>
$(".pet").change(function(){
var elem = $(this),
petid = elem.val();
$.get("http://localhost/Vet/get_pet_details/"+petid, function( result ) {
elem.closest('.pet-group').find('.species').val(result.species_id).trigger('change');
elem.closest('.pet-group').find('.breed').val(result.breed_id).trigger('change');
});
});
</script>
It does change the species field properly and dynamically loads the breed options but it doesn't select the right breed.
What should I so that the right breed will be selected?

Answer 1

When a specific pet has been selected, $.get("http://localhost/Vet/get_pet_details/"...) callback performs in this order:
Step 1: setting value of select.species:
elem.closest('.pet-group').find('.species').val(result.species_id)
Step 2: setting value of select.breed:
elem.closest('.pet-group').find('.breed').val(result.breed_id)
Step 3: call asynchronously event handler of select.species because of
elem.closest('.pet-group').find('.species').trigger("change");
Ajax gets new result.breed_opts, and fills the select.breed. Old value set in step 2 is erased.
So we can do this approach in your first script body:
<script>
$(document).on("change", ".species", function(){
var elem = $(this),
speciesid = elem.val();
$.get("http://localhost/Vet/get_breeds/"+speciesid, function( result ) {
var objbreed = elem.closest('.pet-group').find('.breed');
var oldbreedid = objbreed.val();
objbreed.html(result.breed_opts);
if(oldbreedid) {
objbreed.val(oldbreedid);
}
}, "json" );
});
</script>
After renewing html of select.breed, we restore the previously selected value, ie, that of step 2.