pristine HTML-Select:删除选项将显示选择

时间:2017-07-29 11:29:24

标签: javascript html html5 forms drop-down-menu

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

我以编程方式修改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。更具体地说,我想从选择中删除某些选项,以防它们不适用于用户。

但就在那时,当我从用户尚未触及的下拉列表中删除选项时,所述选择下拉列表的第一个选项将会弹出视图。

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

在摘录中,您可以看到通过三次超时模拟的行为。

现在问题:我会考虑浏览器的行为(显示第一个选项,尽管用户没有点击任何内容)一个错误。大多数情况下,这不是开发人员可以参与的行为,因为他只是删除了以前未被触及的(原始)选择下拉列表中的一个选项?这是一个错误吗?或者我只是固执?

1 个答案:

答案 0 :(得分:2)

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

(同样适用于$('#mySelect').prop("selectedIndex", -1);

解决方法是在select标记中提供硬编码默认选项,这样可以避免在任何更改之前和之后设置空白索引:

你有非常空白的类型:

<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>