Question

我找不到如何动态为选项框中的选项插入组选项的好例子。我在w3CSchools找到的一个例子似乎只选择了一个项目example at 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;

不赞成使用jQuery的简单示例

Answer 1

感谢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);
    }

};

以下是原始代码和修订代码的屏幕截图 Using the old code和Using the revised code

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

Answer 2

找到了有关如何删除列表框in this stackoverflow question

的选项组的解决方案

由于我在两个地方清除了列表框，我刚刚创建了这个小方法并从每个位置调用它。

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。我必须像这样为每个组添加一个id。

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

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

如何将<optgroup>动态插入列表框

2 个答案: