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

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>