javascript - 无法将选项添加到多个 optgroup

Question

我正在尝试向多个optgroup添加一个选项，问题是这个选项只显示在单个optgroup上，我不知道这个机制是不是默认逻辑html 或者我做错了:

$(document).ready(function() {
      $('#options').append('<optgroup label="category1"></optgroup>');
      $('#options').append('<optgroup label="category2"></optgroup>');
    
      var opt1 = new Option("test1", 1);
      var opt2 = new Option("test2", 2);
    
      $('#options optgroup[label=category1]').append(opt1);
      $('#options optgroup[label=category2]').append(opt1);
      $('#options optgroup[label=category1]').append(opt2);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select id="options">
</select>

结果:

enter image description here

如您所见，选项 test1 与 2 个类别相关联，但仅显示在一个类别中。

This is a fiddle.

Answer 1

发生这种情况是因为 opt1 引用了相同的 DOM。追加第二次只是改变 dom 的位置。你不能在两个不同的地方有一个元素。

您可以创建新的 DOM 对象或克隆它

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select id="options">
</select>

$(document).ready(function() {
      $('#options').append('<optgroup label="category1"></optgroup>');
      $('#options').append('<optgroup label="category2"></optgroup>');
    
      var opt1 = new Option("test1", 1);
      var opt2 = new Option("test2", 2);
    
      
      $('#options optgroup[label=category1]').append(opt1);
      $('#options optgroup[label=category2]').append($(opt1).clone());
      $('#options optgroup[label=category1]').append(opt2);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<select id="options">
</select>