Javascript 如何动态插入a<；optgroup>；放入列表框中

我找不到一个很好的例子来说明如何动态地为选择框中的选项插入组选项。我在w3CSchools找到的一个例子似乎只选择了一个项目

这是我的不够充分的代码，我只是在每个组前面插入另一个没有值的选项。我想有3组标签作为组选项插入的选项列表流出来，这将使他们粗体和缩进下面的项目

var list = aCallBack.docs;
//build document list select options
document.getElementById("delDoc").options.length = 0;
document.getElementById("delDoc").options[0] = new Option("Select Document To Delete", "", true, true);

var optLen = document.getElementById("delDoc").options.length;
document.getElementById("delDoc").options[optLen] = new Option("Job Scope Documents", "", true, true);
for (i = 0; i < list.scope.length; i++) {
    var optn = document.createElement("OPTION");
    optn.text = list.scope[i];
    optn.value = list.scope[i];
    document.getElementById("delDoc").options.add(optn);
}

var optLen = document.getElementById("delDoc").options.length;
document.getElementById("delDoc").options[optLen] = new Option("Field Reports", "", true, true);

for (i = 0; i < list.field.length; i++) {
    var optn = document.createElement("OPTION");
    optn.text = list.field[i];
    optn.value = list.field[i];
    document.getElementById("delDoc").options.add(optn);
}

var optLen = document.getElementById("delDoc").options.length;
document.getElementById("delDoc").options[optLen] = new Option("Final Reports", "", true, true);

for (i = 0; i < list.final.length; i++) {
    var optn = document.createElement("OPTION");
    optn.text = list.final[i];
    optn.value = list.final[i];
    document.getElementById("delDoc").options.add(optn);
}

document.getElementById("delDoc").selectedIndex = 0;

var list=aCallBack.docs；
//生成文档列表选择选项
document.getElementById（“delDoc”）.options.length=0；
document.getElementById（“delDoc”）.options[0]=新选项（“选择要删除的文档”、“”、true、true）；
var optLen=document.getElementById（“delDoc”）.options.length；
document.getElementById（“delDoc”）.options[optLen]=新选项（“作业范围文档”，“真”，真）；
对于（i=0；i

---

一个不使用jQuery的简单示例将非常感谢Teemu提供的解决方案，因为我能够在下拉列表中获得组标题。作为一个附带的好处，我还可以通过一个额外的外循环来缩短代码。这是修改后的代码

    this.getFileListResponse = function(msg)
{
    aCallBack = JSON.parse(msg);
    if (aCallBack.errors.length==0)
    {
        //simplfy reference to call back results
        var list = aCallBack.docs;

        //delete any previous entries
        document.getElementById("delDoc").options.length=0;

        //build document list select options
        document.getElementById("delDoc").options[0]=new Option( "Select Document To Delete" , "", true, true);

        //double array to store reference to returned records as well as the group header
        var groups = [['scope','Job Scope Documents'],['field','Field Reports'],['final','Final Reports']];


        for (i = 0; i < 3; i++)
        {
            var group = document.createElement('optgroup'),
                opt = document.createElement('option'),
                n;

            //retrive group label from groups array
            group.label = groups[i][1];

            //retrive document name from the call back data stored in list
            //in this case I used a single value for both the text and value of the option
            //  that could easily be expanded into separate items.
            for (n = 0; n < list[groups[i][0]].length; n++) {
                opt.value = list[groups[i][0]][n];
                opt.text  = list[groups[i][0]][n];
                group.appendChild(opt.cloneNode(true));
            }
            document.getElementById('delDoc').appendChild(group);
        }

    }else{
        aMsg = '';
        for (var i = 0; i < aCallBack.errors.length; i++)
            aMsg += aCallBack.errors[i]+'\n';

        alert(aMsg);
    }

};

this.getFileListResponse=函数（msg）
{
aCallBack=JSON.parse（msg）；
if（aCallBack.errors.length==0）
{
//简化回调结果的引用
var list=aCallBack.docs；
//删除以前的任何条目
document.getElementById（“delDoc”）.options.length=0；
//生成文档列表选择选项
document.getElementById（“delDoc”）.options[0]=新选项（“选择要删除的文档”、“”、true、true）；
//双数组存储对返回记录的引用以及组头
变量组=['scope'、'Job scope Documents']、['field'、'field Reports']、['final'、'final Reports']；
对于（i=0；i<3；i++）
{
var group=document.createElement（'optgroup'），
opt=document.createElement（'option'），
N
//从组数组中检索组标签
group.label=组[i][1]；
//从列表中存储的回调数据中检索文档名称
//在本例中，我对该选项的文本和值都使用了单个值
//可以很容易地扩展为单独的项目。
对于（n=0；n

以下是原始代码和修订代码的前后屏幕截图 及

---

只剩下一个恼人的特性。如果用户单击按钮两次列出文档，则组标签将插入两次，即使例程以清除以前的内容开始。这个问题也发生在我在原始问题中发布的w3cSchools示例中。所以如果有人能解决这个问题，那就太好了。抱歉，没有足够的声誉来发布此失败的图像。请查看我在上面发布的w3cSchools中的示例，单击按钮两次以演示问题。

找到了如何删除列表框选项组的解决方案

因为我在两个地方清除了列表框，所以我创建了这个小方法，并从每个位置调用它

function clearDocList()
{
var optgrp = ['scope','field','final'];
if (document.getElementById('scope'))
{
    for (i=0; i<3; i++)
    {
        grp = document.getElementById(optgrp[i]);
        // remove the group from its parent
        grp.parentNode.removeChild(grp);
    }
    document.getElementById("delDoc").options[0]=new Option( "Select Document To Delete" , "", true, true);
}

---

请注意，在分配组标签之前，我使用第一个数组值分配组id。这现在允许我在列表中引用该组。

您的

元素是否具有

multiple

属性，因为您正在将每个创建的选项设置为

selected

和

defaultSelected

？顺便说一下，如果你发布你的起始HTML以及最终的预期输出HTML，我们将更容易提供更好的答案。你的意思是什么？@ TEMU-考虑把代码作为答案。所有类似的问题似乎都使用jQuery，而您的答案是纯JS。回答得好。David感谢您指出我已将每个小组级别设置为选中级别。那是我的一个错误，不应该是。谢谢你的帮助。你的建议似乎正是我想要的。我们将努力实施它。当你看到它时，它看起来很明显。顺便问一下，“true”在这个行组中代表什么；正如Roberto所说，请将您的回答作为答案发布。在我发布的代码插入下面会出现一个小错误，结尾处的花括号}。您只需清除选项，一个简单的

#deldoc.innerHTML='

也会删除optgroup。

            //retrive group label from groups array
            group.id    = groups[i][0];
            group.label = groups[i][1];