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

【问题标题】：How do I choose an <option> twice on a <select> element (API)如何在 <select> 元素 (API) 上选择两次 <option>
【发布时间】：2021-10-03 18:52:56
【问题描述】：

我有一个 dogAPI，想知道是否有办法选择同一个品种两次，而不必选择另一个选项然后删除输出（比如用户只想要一个品种的输出）。我想我必须重置选择菜单，以便它会自动转到第一个选项，但我尝试的代码不适用于从 API 添加到 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());
});

【问题讨论】：

标签： javascript jquery api select reset

【解决方案1】：

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

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

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

Codepen fixed

【讨论】：