Задержка выбора выпадающего Показывает предыдущий выбранный элемент

Question

Как только я нажму "отправить", я не получу реакцию, пока не нажму другой выбор. Тогда я увижу первый выбор. Поэтому я всегда вижу предыдущий выбор

function watchForm() {
  $('.drop-form').on('click', function(event) {
    var breed = $('#breed').val()
    getPhoto(breed)
  })
}

function getPhoto(name) {
  console.log(name)
  fetch(`https://dog.ceo/api/breed/${name}/images/random`)
    .then(response => response.json())
    .then(responseJson => renderPhoto(responseJson))
}

function renderPhoto(object) {
  $('.picture').html(`
    <h1>Your dog</h1>
    <img src=${object.message} alt="hmmm">`)
}

$(function() {
  console.log(`'js' up and running`)
  watchForm();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for='breed'>Fetch (get it?)</label>
  <select id='breed' class='breed' name='breed'>
    <option value=''>Please Choose</option>
    <option value='affenpinscher'>Affenpinscher</option>
    <option value='african'>African</option>
    <option value='airdale'>Airdale</option>
  </select><br>
  <input type='submit'>
</form>

Answer 1

Вместо добавления события клика в форму, я бы предложил добавить событие изменения в элементе выбора.

Другими словами, вместо:

$('.drop-form').on('click', function(event){
  var  breed = $('#breed').val()
  getPhoto(breed)
})

Добавить событие напрямую на элементе выбора:

$('#breed').change(function(event){
  var  breed = $('#breed').val()
  getPhoto(breed)
})