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

Question

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

的结构

 <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" >

Answer 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 应该如何构建

Answer 2

像<optgroup id="optgroupID">

一样将id设置为optgroup

在 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;

Answer 3

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

$(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>

Answer 4

您将 jQuery 与原版 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>

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

How to Dynamically Create <option> elements within a parent <optgroup>

javascript

jquery

optgroup