如何在输入框中显示或删除li标签而不是文本

Question

我正在尝试解决一些棘手的javascript问题。

这里有两个图像可以显示我的困境。

正如你所看到的，我希望用与删除按钮，而不是文字里的标签，如果我点击+按钮，我希望显示可选择的东西，如果我选择一些然后单击完成，然后在第一个图像的输入框中将它们显示为li标签。

我不想完整的源代码，但希望得到指导如何处理这个问题。

如果你可以推荐任何JavaScript库或代码来解决这个问题，我将非常感激。

请帮帮我!!!

Answer 1

你想要做的是复选框的变体，不是吗？该字段实际上是显示所选框（<li>），而对话框显示用户可以添加的其余未选定框？

我会通过在这些框上指明他们是否被选中来做到这一点。然后，一个简单的CSS规则将显示或隐藏（display: none或display: block）基于该类。点击其中一个项目（在主视图中）的关闭框，或单击项目本身（在对话框中）将切换选定的状态。

夫妇的其他小笔记：

• 我不会用“检查”或因与内建的功能发生冲突，或者至少是令人困惑的人的可能性“选择”作为你的类名。
• 如果您还在显示屏上使用float: left，那么这些箱子应该可以很好地填满空间。
• 最后，您可能希望有两个（重复）项目列表：一个用于字段中的选定项目，另一个用于对话框中的未选定项目。两者都包含完整的可能性列表，并且具有相同的类值（您必须在事件处理代码中维护这些值）。否则，你会试图在文档中的两个地方使用相同的DOM节点，这对我来说太可怕了。