Question

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

在Firefox中，如果用户只选中该字段，则按预期工作。如果用户单击该字段，则内容和值将按预期更新，但如果该字段在用户单击下拉列表中的项目之前失去焦点（用户不会这样做，因为之前的值仍然可以突出显示），然后，该值将更新为select标记中的最顶层选项。

在IE中，当用户点击该字段时，javascript会触发，我相信会更新DOM，但在字段失去焦点之前，不会显示更改结果。因此，向用户显示的下拉列表是现在删除的选项，而不是新添加的选项。如果select标签在用户没有选择选项的情况下失去焦点，它就会按预期工作（但是如果用户再次点击它，则下拉列表中的字体会神秘地变为serif。如果你能告诉我为什么会发生这种情况，可以获得奖励积分。） p>

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

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

Answer 2

.val（）不适用于选择。相反，获取所选选项的文本如下：

var Selected = $("select option:selected").text();

然后，一旦您更换了选择的选项，请执行以下操作：

$("select option").each(function() {
    if ($(this).text() == Selected) {
        $(this).attr("selected", "selected");
    }
});

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

2 个答案: