如何在父 <optgroup> 中动态创建 <option> 元素答案

【问题标题】：How to Dynamically Create <option> elements within a parent <optgroup>如何在父 <optgroup> 中动态创建 <option> 元素
【发布时间】：2018-06-12 20:50:29
【问题描述】：

我正在尝试动态生成类似于

的结构

 <select>
     <optgroup>
         <options> option 1 </option>
          <options> option 2 </option>
                   etc..
      </optgroup>
 </select>

使用以下代码。正如您从调试屏幕中看到的那样，我似乎无法在<optgroup> 中嵌入选项。有人可以帮忙吗？

    milestoneData =[{"phase_ID":21,"phase_name":"hello1"}, {"phase_ID":22,"phase_name":"hello2"}]
    var optionGroup = document.createElement("optgroup");
    optionGroup.setAttribute("label","Project 1");
    optionGroup.setAttribute("value","100");
    $(".test").append(optionGroup).attr("id","theid");
    for (var i = 0; i <  milestoneData.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value",milestoneData[i].phase_ID);
        option.innerHTML=milestoneData[i].phase_name;
        $('#theid').append(option);
   }

HTML 锚是<select id = "testid" name = "testing" class ="test" >

【问题讨论】：

标签： javascript jquery optgroup

【解决方案1】：

你快到了，你目前遇到的问题是$(".test").append(optionGroup).attr("id","theid");

您目前正在说将optionGroup 附加到.test 并将id 添加到.test 元素，在您的情况下，您应该将id 添加到optionGroup

所以应该是这样的：

$(document).ready(function() {
   milestoneData =[{"phase_ID":21,"phase_name":"hello1"}, {"phase_ID":22,"phase_name":"hello2"}]

    var optionGroup = document.createElement("optgroup");
    optionGroup.setAttribute("label","Project 1");
    optionGroup.setAttribute("value","100");
    optionGroup.setAttribute("id","theid");

    $(".test").append(optionGroup);

   for (var i = 0; i <  milestoneData.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value",milestoneData[i].phase_ID);
        option.innerHTML=milestoneData[i].phase_name;

        $('#theid').append(option);
   }
});

我为你创建了一个快速的 jsfiddle：https://jsfiddle.net/gcpn10kd/1/

您可以查看here 的一些示例 optgroup 的结构

【讨论】：

但是他不是将选项直接附加到#theid（选择）吗？他应该附加到选项组。
@Phiter 是的，这就是我将 id 添加到选项组的原因，所以附加应该转到选项组。
哦，我明白了。我认为#theid 是选择。
完美。他们说不要在这里说谢谢，但我不得不说。经过近 5 个小时的尝试修复它。谢谢！

【解决方案2】：

@Alexander，您需要使用 optgroup 附加选项，然后 optgroup 组将被附加到选择。查看解决方案

$(document).ready(function(){
  var milestoneData =[{"phase_ID":21,"phase_name":"hello1"}, {"phase_ID":22,"phase_name":"hello2"}]
    var optionGroup = document.createElement("optgroup");
    optionGroup.setAttribute("label","Project 1");
    optionGroup.setAttribute("value","100");
    $(".test").append(optionGroup).attr("id","theid");
    for (var i = 0; i <  milestoneData.length; i++) {
        var option = document.createElement("option");
        option.setAttribute("value",milestoneData[i].phase_ID);
        option.innerHTML=milestoneData[i].phase_name;
        optionGroup.append(option);
       
   }
    $('#theid').append(optionGroup);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "testid" name = "testing" class ="test" ></select>

【讨论】：

【解决方案3】：

您将 jQuery 与 vanilla javascript 混为一谈。如果您要在您的网站中使用 jQuery，我建议您完全使用它。

您可以从更小的代码中受益：

$(document).ready(function() {
  var milestoneData = [{ "phase_ID": 21, "phase_name": "hello1" }, { "phase_ID": 22, "phase_name": "hello2" }];

  var optionGroup = $("<optgroup/>", {
    label: 'Project 1',
    value: '100'
  });

  for (var i = 0; i < milestoneData.length; i++) {
    var option = $("<option/>", {
      value: milestoneData[i].phase_ID,
      text: milestoneData[i].phase_name
    });

    optionGroup.append(option);
  }
  $(".test").append(optionGroup);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="test">

</select>

【讨论】：

如您所见，您实际上并不需要选项组的 ID。
是的，谢谢。这确实是我想要解决的问题。

【解决方案4】：

将 id 设置为 optgroup，例如 <optgroup id="optgroupID">

在 JS 中：（假设我们要添加另外 3 个选项）

   var id = document.getElementById("optgroupID");  
   var value = document.getElementById("optgroupID").innerHTML;  
   for(var i=0;i<3;i++){  
      value += "<option>"+i+"</option>";  
   }  
   id.innerHTML = value;

【讨论】：