Question

使用简单的select：

<select>
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 <option value="3">Three</option>
</select>

<button>Click to wrap</button>

并在wrapAll中使用jQuery optgroup选项：

$("button").click(function() {
    $("option").wrapAll('<optgroup label="My Group"></optgroup>');
});

这会导致所选值更改为最后一个选项。

https://jsfiddle.net/333jx9aq/

至少在Firefox和Chrome中都有。它运作正常＆＃39;在IE中。发生了什么事？

Answer 1

我想这可能被视为jQuery错误。

wrapAll的工作方式如下：

在要包装的第一个元素之前，在父级中插入新的包装器（本例中为<optgroup>）。
创建文档片段对象。
将要包装的每个元素附加到文档片段。这会将它们作为原始父级（<select>）
将文档片段附加到新包装器。

<select>的值始终必须是<option>之一，只要它有任何选项。当步骤3删除所选选项时，其值将设置为第一个剩余选项。由于它按顺序删除了每个选项，因此在该循环结束时，该值是最后一个选项。

然后，当附加文档片段时，没有任何内容将<select>的值重置为其旧值，因此它仍然设置为最后一个原始选项。

您可以通过自己保存值来解决此问题。

$("button").click(function() {
  var oldValue = $("select").val();
  $("option").wrapAll('<optgroup label="My Group"></optgroup>');
  $("select").val(oldValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
</select>

<button>Click to wrap</button>

jQuery wrapAll optgroup中的所有选项都会导致值的更改

1 个答案: