在检查和取消选中复选框时，从下拉列表中添加和删除项目 [英] adding and removing item from a dropdown list when checking and unchecking checkboxes

问题描述

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

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

到目前为止的代码：

  serverList [BERT] = [server22，server1，server2，server3]; 
 serverList [BOB] = [server10，server55，server99]; 
 
函数createServerList（env）{
 
 if（env！=）{
 
 if（！serverList [env]）{
 fadeInfoText（错误！没有查找+ env）; 
 return; 
 
 
 $（＃ss1）。append（< optgroup label ='+ env +Server List'>）; （var j = 0; j< serverList [env] .length; j ++）{
 serveritem = serverList [env] [j] 
 $（ ＃ss1）。find（optgroup）。append（< option value ='+ serveritem +'>+ serveritem +< / option>）; 
} 
 
 $（＃ss1）。multiselect（'refresh'）; 
 
 
  

任何帮助都将非常感谢。

解决方案

您正处于正确的轨道，您拥有的代码非常适合将选项添加到select。

然而，你可以简化它并向 optgroup s添加 id 正在增加。这反过来会使复选框未被选中时删除选项变得容易。您需要做的就是根据 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）; //绑定更改事件并调用您的例程}）;函数refreshList（add，env）{if（！add）{/ /如果复选框没有被选中...删除optgroup。$（＃ss1）。find（optgroup＃+ env）.remove（）; // ..基于id作为复选框的值返回; //我们不需要继续} //如果复选框被选中的话。var $ optgrp = $（< optgroup>）; // ..添加一个optgroup .. $ optgrp.attr（id，env）; // ..with id作为复选框的值.. $ optgrp.attr（label，env）; // ...和任何标签serverList [env] .forEach（function（item，idx）{//迭代你的服务器列表var $ opt = $（< option>）; //添加一个选项$ opt.val item）; //将服务器名称添加到它的值.. $ opt.text（item）; // ..和text $ opt.appendTo（$ optgrp）; //将它追加到之前创建的optgroup}）; $ optgrp.appendTo（ ＃SS1）; //添加optgroup到select元素}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< input id =c1type =checkbox value =BERT/>< input id =c2type =checkboxvalue =BOB/>< hr />< select id =ss1>< / select>

以下是您可以玩的小提琴： http://jsfiddle.net/abhitalks/bkv1gh6m/

。

I have 8 checkboxes currently on a page; each one represents an environment name. I pass the environment name into the code which then looks up a list of servers and populates those into a dropdown list with headings using optgroup.

A user can check a box and a set of server names are added to the dropdown. If, however, they uncheck the same box it's adding all the servers again to the dropdown. What I would like it to do is if a user unchecks a checkbox they have mistakenly checked I want the associated servers and optgroup heading removed from the dropdown.

Code so far:

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

Any help would be much appreciated.

解决方案

You are on the right track and the code you have, works well to add the options to the select.

However, you could make it simpler and add id to the optgroups that you are adding. This will in turn make it easy to remove the options when the checkbox is unchecked. All you will then need to do is to remove the appropriate optgroup based on the id.

This snippet will help you understand that:

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
}

<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>

Here is a fiddle for you to play with: http://jsfiddle.net/abhitalks/bkv1gh6m/

.

这篇关于在检查和取消选中复选框时，从下拉列表中添加和删除项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！