Javascript 下拉选择有延迟。它显示以前选择的项目

一旦我点击提交，我不会得到反应，直到我点击另一个选择。然后我将看到第一个选择。所以我总是看到以前的选择

函数watchForm（）{
$（'.drop form'）。在（'click'，函数（事件）{
var-breed=$（'#breed'）.val（）
getPhoto（品种）
})
}
函数getPhoto（名称）{
console.log（名称）
取回(`https://dog.ceo/api/breed/${name}/images/random`）
.then（response=>response.json（））
.然后（responseJson=>renderPhoto（responseJson））
}
功能渲染照片（对象）{
$（'.picture'）.html(`
你的狗
`)
}
$（函数（）{
console.log（`js'启动并运行`）
watchForm（）；
})

去拿（明白吗？）
请选择
阿芬潘舍尔
非洲的
艾尔代尔

我建议在select元素上添加更改事件，而不是在表单上添加单击事件

换句话说，不是：

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

直接在select元素上添加事件：

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

---

我建议在select元素上添加一个更改事件，而不是在表单上添加一个click事件

换句话说，不是：

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

直接在select元素上添加事件：

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

---

HTML中没有

.drop form

元素……有一个获取请求需要时间，http请求不是即时的。因此，您需要删除旧内容，可能需要添加加载图标。@epascarello。谢谢。HTML中没有

。drop form

元素……有一个获取请求需要时间，http请求不是即时的。因此，您需要删除旧内容，可能需要添加加载图标。@epascarello。非常感谢。