Question

我遇到了一个问题，当我使用jquery在我的下拉菜单中添加一个optgroup时，它没有显示出来。检查源我可以看到结束标记已经放在最后，从而在内容被添加之前关闭了optgroup。我尝试了各种添加内容的方法

所以在脚本的顶部我已经创建了一个具有服务器环境的哈希，这会返回一个

列表

页面顶部：

JAVASCRIPT

serverList["BERT"] = ["server1", "server2"

function createServerListNEW（env）{

    if (env != "") {

        if (! serverList[env]) {
            fadeInfoText("ERROR! No Lookup for " + env);
            return;
        }

        $("#ss1").append("<optgroup label='" + env + "'>");

        for (var j = 0; j < serverList[env].length; j ++) {
            serveritem = serverList[env][j]
            $("#ss1").append("<option value='" + serveritem + "'>" + serveritem + "</option>");
        }

        $("#ss1").append("</optgroup>");
        $("#ss1").multiselect('refresh');
    }
}

跑步后的输出

    <select title="Server Selection" multiple="multiple" name="ss1" id="ss1" size="15" style="display: none; border-color: black; background-color: white;">  
<optgroup label="BERT"></optgroup>
<option value="server1">server1</option>
<option value="server2">server2</option>
</select>

Answer 1

这不是你创建元素的方式。

执行$("#ss1").append("<optgroup label='" + env + "'>");时，已经有</optgroup>。所以你需要删除最后一个附加。

然后，您必须使用<option>

将<optgroup>追加到find

for (var j = 0; j < serverList[env].length; j ++) {
   serveritem = serverList[env][j]
   $("#ss1").find("optgroup").append("<option/>", { 
        value : serveritem,
        text : serveritem
   });
}

Answer 2

这背后的想法是我在页面上有多个ENV复选框，我想在每个env下有一个服务器列表。因此，如果我单击BERT复选框，则将创建optgroup BERT，然后将数组中的所有服务器放在该列表下。再次是有人点击另一个ENV然后另一个optgroup应该与它下面的env的服务器一起创建。

我也想要它，以便如果某人取消选中某个选项，那么该optgroup和服务器将被移除但尚未到达该部分：）

好的，我设法让它使用以下代码，附加你的建议不能与IE8一起工作，因为下拉的内容丢失了，这是我之前解决的一个问题：

function createServerList(env) {

    if (env != "") {

        if (! serverList[env]) {
            fadeInfoText("ERROR! No Lookup for " + env);
            return;
        }

        $("#ss1").append("<optgroup label='" + env + " Server List'>");

        for (var j = 0; j < serverList[env].length; j ++) {
            serveritem = serverList[env][j]
            $("#ss1").find("optgroup").append("<option value='" + serveritem + "'>" + serveritem + "</option>");
        }

        $("#ss1").multiselect('refresh');
    }
}

非常感谢这些建议，并指出了我正确的方向。如果未经检查，请立即删除lol：）

使用jquery添加optgroup

2 个答案: