Question

我目前在页面上有8个复选框;每个代表一个环境名称。我将环境名称传递给代码，然后查找服务器列表并将其填充到带有使用optgroup标题的下拉列表中。

用户可以选中一个框，并在下拉列表中添加一组服务器名称。但是，如果他们取消选中相同的框，则会将所有服务器再次添加到下拉列表中。我想要做的是，如果用户取消选中他们错误检查的复选框，我希望关联的服务器和optgroup标题从下拉列表中删除。

到目前为止

代码：

serverList["BERT"] = ["server22", "server1", "server2", "server3"];
serverList["BOB"] = ["server10", "server55", "server99"];

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');
    }
}

非常感谢任何帮助。

Answer 1

您处于正确的轨道和您拥有的代码，可以很好地将选项添加到选择中。

但是，您可以更简单地将id添加到要添加的optgroup中。这样可以在取消选中复选框时轻松删除选项。您需要做的就是根据optgroup删除相应的id。

此代码段将帮助您了解：

＆＃13;

var serverList = {};
serverList["BERT"] = ["server22", "server1", "server2", "server3"];
serverList["BOB"] = ["server10", "server55", "server99"];

$("input[type=checkbox]").on("change", function() {
    refreshList(this.checked, this.value); // bind change event and call your routine
});

function refreshList(add, env) {
    if (! add) { // if checkbox is not checked...remove the optgroup..
        $("#ss1").find("optgroup#" + env).remove(); // ..based on id as the checkbox value
        return; // we don't need to continue
    }
    // if checkbox is checked..  
    var $optgrp = $("<optgroup>"); // ..add an optgroup..
    $optgrp.attr("id", env);       // ..with id as the checkbox value..
    $optgrp.attr("label", env);    // .. and whatever label   
    serverList[env].forEach(function(item, idx) { // iterate your serverlist
        var $opt = $("<option>");  // add an option
        $opt.val(item);            // add server name to its value..
        $opt.text(item);           // .. and text
        $opt.appendTo($optgrp);    // append it to the optgroup created earlier
    });
    $optgrp.appendTo("#ss1");      // append the optgroup to the select element
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="c1" type="checkbox" value="BERT" />
<input id="c2" type="checkbox" value="BOB" />
<hr />
<select id="ss1"></select>

＆＃13;

这是一个让你玩的小提琴：http://jsfiddle.net/abhitalks/bkv1gh6m/

在选中和取消选中复选框时，从下拉列表中添加和删除项目

1 个答案: