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

我目前在页面上有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(""); for (var j = 0; j < serverList[env].length; j ++) { serveritem = serverList[env][j] $("#ss1").find("optgroup").append("" + serveritem + ""); } $("#ss1").multiselect('refresh'); } } 

任何帮助将非常感激。

Answer 1

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

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

此代码段将帮助您了解：

 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 = $(""); // ..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 = $(""); // 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 }