一些输入的问题

Question

有谁知道我如何用 HTML 和 JS 制作这个http://prntscr.com/9z7pk？我制作了这张图片，以便您可以更好地理解我的意思。 我已经用 2 个多选输入完成了这项工作，但我不知道如何在 html 中插入以放置复选框。

提前致谢！

Answer 1

如果您发现自己的应用程序中有很多这些复杂的小部件，您应该研究像 extJS 这样的框架或其他类似的框架。它可以让您省去很多麻烦，并且可以防止您重新发明一个已经被重新发明了太多次的轮子。

Answer 2

不幸的是，多选不会让您将复选框或其他任意内容注入菜单项 - 它依赖于操作系统原生的多选热键（通常是 shift 和 control）。

您可以尝试将这两个项目设置为 ol 或 ul 列表，并将文档项目设置为其中的 li 元素。每当您将项目添加到右侧列表时，渲染一个新的 li 元素并使用逗号分隔的选定项目列表更新 <input type="hidden" />。

根据您希望交互的工作方式，您可以：

1. 如图所示实现添加/删除按钮，需要您自己在列表中实现多选。像 extJS（如 zi42 提到的）这样的小部件框架可以帮助解决这个问题。
2. 在左侧框中的所有项目旁边放置一个“添加”链接，在选择框中的所有项目旁边放置一个“删除”链接，必填项目除外。
3. 丢弃双框，并在单个统一列表中的每个项目上放置复选框，但应具有选中但禁用复选框输入的必填项目除外。