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>

无法将选项添加到多个optgroup

1 个答案: