javascript - 一些输入的问题

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. 处理双框，而是将复选框放置在单个统一列表中的每个项目上，除了应该具有选中但禁用的复选框输入的必填项目。