原始 HTML-Select：删除选项将显示选择答案

【问题标题】：pristine HTML-Select: removing option will show selection原始 HTML-Select：删除选项将显示选择
【发布时间】：2017-07-29 11:29:23
【问题描述】：

我很难找到这个问题的标题，基本上就是这样：

我以编程方式修改 HTML-Select 的选项，然后突然第一个选项显示在选择框中，尽管我没有单击它

这是完整的源代码：

$('#mySelect').val('');


setTimeout(function() {
  $('#333').remove();
  setTimeout(function() {
    $('#mySelect').val('');
  }, 2000);
}, 2000);

<script src="//code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<form>
  <select id="mySelect">
          <option id="111" value="111">first</option>
          <option id="222" value="222">second</option>
          <option id="333" value="333">third</option>
      </select>
</form>

现在澄清一下情况：

我想根据用户在表单的其他元素中输入的信息修改选择下拉菜单。更具体地说，我想从选择中删除某些选项，以防它们不适用于用户。

但是，当我从用户尚未触摸的下拉列表中删除选项时，所述选择下拉列表的第一个选项将弹出。

为了防止我不得不将 select-dropdown 的值重置为空字符串，我觉得这很烦人。我希望选择下拉菜单不会改变它的空状态，只是因为我删除了其中一个选项。

在 sn-p 中，您可以看到通过三个超时模拟的行为。

现在的问题：我认为浏览器的行为（显示第一个选项，尽管用户没有点击任何东西）是一个错误。最肯定的是，这不是开发人员可以接受的行为，因为他只是删除了以前未触及的（原始）选择下拉列表的选项之一？这是一个错误吗？还是我太固执了？

【问题讨论】：

标签： javascript html forms drop-down-menu

【解决方案1】：

我能提供的唯一解释是，这种行为只有在您通过一些 jquery 或 JS 代码动态设置默认值时才会发生

（$('#mySelect').prop("selectedIndex", -1); 也是如此）

一种解决方法是在您的选择标签中提供一个硬编码的默认选项，这样可以避免在任何更改之前和之后设置空白索引：

你有一个非常空白的类型：

<option label=" "></option>
<option id="111" value="111">first</option>
<option id="222" value="222">second</option>

或者更愉快的：

<option disabled selected value> Pick One...</option>
<option id="111" value="111">first</option>
<option id="222" value="222">second</option>

【讨论】：