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

How to dynamically insert a <optgroup> into a listbox

本文关键字：gt optgroup 列表 何动态 lt 动态 插入      更新时间：2023-09-26

我找不到一个关于如何在选择框中动态插入选项组选项的好例子。我在w3CSchools找到的一个例子似乎只在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的简单例子会很受欢迎

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

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

只剩下一个烦人的功能。如果用户单击按钮列出文档两次，则组标签将插入两次，即使例程从清除以前的内容开始。这个问题也出现在我在最初的问题中发布的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。我不得不像这样为每个组添加一个id。

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

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

相关文章：