• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

如何使用属性创建增强的HTML传输框

JavaScript 3次浏览

我需要使用HTML,JavaScript和JQuery创建增强传输框。如何使用属性创建增强的HTML传输框

我有一组用户可以选择并与属性相关联的选项。选择和取消选择必须用两个SELECT HTML元素(即传输箱)完成。例如,这些选项可以是技能名称列表。

当单击“添加”按钮时,第一个SELECT元素中选定的选项以及属性(例如文本框中的年数)必须从源SELECT元素传输到选定/目的地SELECT元素。该属性必须与第二个SELECT元素中的项目文本一起显示(例如,该项目显示技能和年数)。

当单击“删除”按钮时,第二个SELECT元素中的选定选项必须移回到第一个SELECT元素(原始格式..没有该属性)。

JSON应该是初始选择设置和保存最新选择的数据格式。

我想要在隐藏的输入字段中通过JSON设置一组初始选择和属性。我希望将最后一组选择保存到JSON中的相同隐藏输入字段中。

例HTML:

实施例的CSS:

视觉的要求:

enter image description here


===========解决方案如下:

下面就来挑战的解决方案。开始时设置的变量使得该解决方案易于配置和维护。

当页面显示时,SetupInitialSelections方法查看隐藏输入字段中的JSON数据并填充所选项目。

当点击’保存’按钮时,当前选择被转换为JSON并放回隐藏的输入字段。

在显示过程中引入了不可见字符\ u200C来分隔项目文本和属性。如果必须删除项目并且必须确定原始项目文本,则可以使用它,以便它可以放回到源SELECT元素中。

selectNewItem如果您希望在通过’add’或’remove’操作将其添加到SELECT元素后不久选择新添加的项目,则可将变量设置为true。

该解决方案支持多项选择。因此可以一次添加多个项目……并且同样可以一次移除多个项目。


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)