原始的HTML的选择：删除选项将显示选择

我已经很难找到了这个问题的一个标题，那么基本上是这样的：原始的HTML的选择：删除选项将显示选择

编程方式修改HTML，选择的选项，然后突然第一选项被显示在选择框，虽然我没有点击它，

下面是完整的源代码：

$('#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不会改变它的空状态，只是因为我删除了其中一个选项。

在代码片段中，您可以看到通过三次超时模拟的行为。

现在的问题：我会考虑浏览器的行为（显示第一个选项，虽然用户没有点击任何东西）的错误。当然，这不是开发人员可以预见的行为，因为他只是删除了以前未触及的（原始）选择下拉列表中的一个选项？这是一个错误？还是我只是为了固执？

来源

2017-07-29 Tobias Gassmann

我能提供的唯一解释是，当你动态设置默认值此行为只发生，通过一些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>

来源

2017-07-29 14:07:01 PRMoureu

原始的HTML的选择：删除选项将显示选择

回答

相关问题