使用 JavaScript 单击复选框时更新下拉列表框内容

updating a dropdown boxes contents when clicking a checkbox using javascript

本文关键字：下拉列表 更新 JavaScript 单击 复选框 使用      更新时间：2023-09-26

我正在尝试找出使其工作的最佳方法。 我正在尝试做的如下：

我有一个页面上有 10 个复选框。 我想要一个动态下拉列表，当单击复选框时，该下拉列表填充了服务器名称列表

例：

<tr>
    <td>
        <input id="site4" name="list[]" type="checkbox" value="BERT">
        <label id="site4l">BERT</label>
    </td>
</tr>
<tr>
    <td>
        <input id="site5" name="list[]" type="checkbox" value="BOB">
        <label id="site5l">BOB</label>
    </td>
</tr>
我还

会在页面的另一侧有一个选择下拉列表，我希望在选中复选框时填充该下拉列表，如果复选框未选中，我还希望从选择下拉列表中删除这些值。

我想过这样的事情

在 JavaScript 中设置哈希

serverList["BERT"] = ["server1", "server2", "server3", "server4", "server5"];
serverList["BOB"] = ["server8", "server9", "server10", "server11"];

然后我有点纠结于如何构建列表和显示。 我见过一些jquery插件，它们将项目分组在看起来不错的复选框中。

任何帮助将不胜感激。

非常感谢米坦德拉

你有什么代码要处理吗？突然工作有点困难。

一般来说：您要查找的是change事件 (http://api.jquery.com/change/(。我个人会在所有复选框中添加一个更改事件，如果未选中，只需删除 (http://api.jquery.com/remove/( 所有共同响应条目，如果选中，则只需将它们 (http://api.jquery.com/append/( 附加到您的下拉列表中。

希望这有帮助。

感谢您的回复。

我想来自perl背景，我想做的是说我有各种具有不同名称的复选框，例如一个可能是BOB

我会有某种像 Java 数组字段[BOB] = [服务器数组]

当我选中该框时，它会使用 BOB 的键查找服务器列表，然后用服务器列表填充下拉框。

我考虑这样做的方式是在java中构建某种哈希，从中可以生成选择下拉列表。 因此，如果用户取消选中他们已经选中了键的框，则后续值将从哈希中删除。

我不太确定如何在 Java 中实现这一点，因为我只涉足它。

相关文章：