javascript - 为什么我的选择标签在 Firefox 和 IE 中无法正确显示？

Question

使用 Jquery，我希望能够在焦点上动态填充可能已经有值的选择字段。填充后，如果选择标签作为新字段中的选项存在，我想将其设置为先前的值。我可以在 Chrome 中完成此操作，但在 Internet Explorer 和 Firefox 中我会遇到不同的意外行为。下面是问题的描述、一些示例代码以及带有示例代码的 JSFiddle 的链接。

在 Firefox 中，如果用户仅使用 Tab 键进入该字段，则它会按预期工作。如果用户单击该字段，则内容和值会按预期更新，但如果在用户单击下拉列表中的项目之前该字段失去焦点(用户通常不会这样做，因为仍然可以突出显示先前的值)，然后该值将更新为选择标记中最上面的选项。

在 IE 中，当用户单击该字段时，JavaScript 会触发，并且我相信会更新 DOM，但更改的结果将不会显示，直到该字段失去焦点。因此，向用户显示的下拉列表是现在删除的选项，而不是新添加的选项。如果选择标签在用户没有选择选项的情况下失去焦点，它将按预期工作(但如果用户再次单击它，下拉列表中的字体会神秘地更改为衬线。如果您能告诉我为什么会发生这种情况，那就加分)。

我想知道我的代码是否有问题，或者我的问题是否是由浏览器中的错误(或功能)引起的。

<p>
    <select>
        <option value='aaa'>aaa</option>
        <option value='bbb' selected="selected">bbb</option>
    </select>
</p>

<script>
    $(document).ready(function() {
        var newOpts = "<option value='ccc'>ccc</option><option value='ddd'>ddd</option><option value='bbb'>bbb</option>";

        var $select = $("select");
        var selectedOpt = $select.val();

        $select.focus(function() {
            $select
                .empty()
                .append(newOpts)
                .val(selectedOpt);
        });
    });
</script>

I have the above in JSFiddle here.

类似的 JSFiddle 示例 exists here ，每次单击选择标记时显式显示附加选项。

任何帮助将不胜感激。

Answer 1

select 元素的事件处理因浏览器而异。

一个有点hacky的解决方案，似乎在跨浏览器上一致工作，是模拟在焦点上打开选择元素，然后在模糊时关闭它:

var newOpts = "<option value='ccc'>ccc</option><option value='ddd'>ddd</option><option value='bbb'>bbb</option>";

var $select = $("select");
var selectedOpt = $select.val();

$select.focus(function() {
  if(!$(this)[0].size) {
    $(this)
      .empty()
      .append(newOpts)
      .val(selectedOpt)
    $(this)[0].size= $(this)[0].options.length;
    
  }
});

$select.on('change blur', function() {
  $(this)[0].size= 0;
});

select {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span style="position:relative;width:4em;float:left">
  &nbsp;
  <select>
    <option value='aaa'>aaa</option>
    <option value='bbb' selected="selected">bbb</option>
  </select>
</span>
<input>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.