使用jquery添加optgroup

Question

当我使用jquery将optgroup添加到下拉菜单时，我遇到了一个问题，它没有出现。通过检查源，我可以看到结束标记已经放置在末尾，从而在添加内容之前关闭optgroup。我尝试过各种添加内容的方法。

因此，在脚本的顶部，我创建了一个具有服务器环境的散列，这将复述

页面顶部：

JAVASCRIPT

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

函数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 :)