如何在 <select> 元素 (API) 上两次选择 <option>

Question

我有一只狗API，想知道是否有办法 select 同一品种两次而不必 select 另一个选项，然后删除输出（比如用户只想要单一品种的输出）。我想我必须重置 select 菜单，这样它会自动转到第一个选项，但我尝试的代码不适用于从 [=19= 添加到 DOM 的元素].这是我尝试过的，这是我的代码笔。

https://codepen.io/drxl/pen/VwbQZyK

function createClassOption1() {
    let option = $('<option>Choose a dog breed</option>');
    option.addClass('default');
}

const resetSelect = $('#breeds').find('option');
$('#breeds').change(e => {
    const value = $('#breeds').val();
    console.log(value);
    $('#breeds').val(defaultOption.val());
});

Answer 1

<select> 元素是通过 breedList 函数动态创建的...因此您需要使用委托事件侦听器。

然后，如果你想“重置”select离子，你可以使用selectedIndex 属性。我建议您在 setTimeout 内执行此操作，以便用户看到 select 大约在图像加载时重置。

$("#breeds").on("change", "select", function() {
  const value = this.value;
  console.log(value);
  let select = this
  setTimeout(function(){
    select.selectedIndex = 0;
  },800)
});

Codepen fixed

如何在 <select> 元素 (API) 上两次选择 <option>

How do I choose an <option> twice on a <select> element (API)

javascript

api

jquery

select

reset