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 1}}

所以它会是这样的：

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

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

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

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

4 个答案: