如何使用属性创建增强的HTML传输框
我需要使用HTML，JavaScript和JQuery创建增强传输框。如何使用属性创建增强的HTML传输框
我有一组用户可以选择并与属性相关联的选项。选择和取消选择必须用两个SELECT HTML元素（即传输箱）完成。例如，这些选项可以是技能名称列表。
当单击“添加”按钮时，第一个SELECT元素中选定的选项以及属性（例如文本框中的年数）必须从源SELECT元素传输到选定/目的地SELECT元素。该属性必须与第二个SELECT元素中的项目文本一起显示（例如，该项目显示技能和年数）。
当单击“删除”按钮时，第二个SELECT元素中的选定选项必须移回到第一个SELECT元素（原始格式..没有该属性）。
JSON应该是初始选择设置和保存最新选择的数据格式。
我想要在隐藏的输入字段中通过JSON设置一组初始选择和属性。我希望将最后一组选择保存到JSON中的相同隐藏输入字段中。
例HTML：
<input type="hidden" id="SelectionsId" value='[{ "id": "2", "attribute":"15"},{ "id": "4", "attribute":"3" }]' /> <!--<input type="hidden" id="SelectionsId" value='[]' />-->
<div>
<select class="MultiSelect" multiple="multiple" id="SelectFromId">
<option value="1">.NET</option>
<option value="2">C#</option>
<option value="3">SQL Server</option>
<option value="4">jQuery</option>
<option value="5">Oracle</option>
<option value="6">WPF</option>
</select>
<div style="float:left; margin-top:3%; padding:8px;">
<div>
<span>Years:</span>
<input id="YearsId" type="number" value="1" style="width:36px;" />
<button title="Add selected" id="includeBtnId">⇾</button>
</div>
<div style="text-align:center;margin-top:16%;">
<button title="Remove selected" id="removeBtnId">⇽</button>
</div>
</div>
<select class="MultiSelect" multiple="multiple" id="SelectToId"></select>
</div>
<div style="clear:both;"></div>
<div style="margin-top:40px;margin-left:200px;">
<button onclick="SaveFinalSelections();">Save</button>
</div>
实施例的CSS：
<style> .MultiSelect {
width: 200px;
height: 200px;
float: left;
}
</style>
视觉的要求：
回答：
下面就来挑战的解决方案。开始时设置的变量使得该解决方案易于配置和维护。
当页面显示时，SetupInitialSelections方法查看隐藏输入字段中的JSON数据并填充所选项目。
当点击'保存'按钮时，当前选择被转换为JSON并放回隐藏的输入字段。
在显示过程中引入了不可见字符\ u200C来分隔项目文本和属性。如果必须删除项目并且必须确定原始项目文本，则可以使用它，以便它可以放回到源SELECT元素中。
selectNewItem如果您希望在通过'add'或'remove'操作将其添加到SELECT元素后不久选择新添加的项目，则可将变量设置为true。
该解决方案支持多项选择。因此可以一次添加多个项目......并且同样可以一次移除多个项目。
<script src="jquery-1.12.4.js"></script> <script>
var savedSelectionsId = 'SelectionsId';
var fromElementId = 'SelectFromId';
var toElementId = 'SelectToId';
var includeButtonId = 'includeBtnId';
var removeButtonId = 'removeBtnId';
var extraElementId = 'YearsId';
var extraPrefix = " (";
var extraSuffix = " years)";
var noItemsToIncludeMessage = 'Select item(s) to include.';
var noItemsToRemoveMessage = 'Select item(s) to remove.';
var selectNewItem = false;
var hiddenSeparator = '\u200C'; // invisible seperator character
$(document).ready(function() {
SetupInitialSelections();
//when button clicked, include selected item(s)
$("#" + includeButtonId).click(function (e) {
var selectedOpts = $('#' + fromElementId + ' option:selected');
if (selectedOpts.length == 0) {
alert(noItemsToIncludeMessage);
e.preventDefault();
return;
}
var attribute = $("#" + extraElementId).val();
selectedOpts.each(function() {
var newItem = $('<option>', { value: $(this).val(), text: $(this).text() + hiddenSeparator + extraPrefix + attribute + extraSuffix });
$('#' + toElementId).append(newItem);
if (selectNewItem) {
newItem.prop('selected', true);
}
});
$(selectedOpts).remove();
e.preventDefault();
});
//when button clicked, remove selected item(s)
$("#" + removeButtonId).click(function (e) {
var selectedOpts = $('#' + toElementId + ' option:selected');
if (selectedOpts.length == 0) {
alert(noItemsToRemoveMessage);
e.preventDefault();
return;
}
selectedOpts.each(function() {
var textComponents = $(this).text().split(hiddenSeparator);
var textOnly = textComponents[0];
var newItem = $('<option>', { value: $(this).val(), text: textOnly });
$('#' + fromElementId).append(newItem);
if (selectNewItem) {
newItem.prop('selected', true);
}
});
$(selectedOpts).remove();
e.preventDefault();
});
});
// Setup/load initial selections
function SetupInitialSelections() {
var data = jQuery.parseJSON($("#" + savedSelectionsId).val());
$.each(data, function (id, item) {
var sourceItem = $("#" + fromElementId + " option[value='" + item.id + "']");
var newText = sourceItem.text() + hiddenSeparator + extraPrefix + item.attribute + extraSuffix;
$("#" + toElementId).append($("<option>", { value: sourceItem.val(), text: newText }));
sourceItem.remove();
});
}
// Save final selections
function SaveFinalSelections() {
var selectedItems = $("#" + toElementId + " option");
var values = $.map(selectedItems, function (option) {
var textComponents = option.text.split(hiddenSeparator);
var attribute = textComponents[1].substring(extraPrefix.length);
var attribute = attribute.substring(0, attribute.length - extraSuffix.length);
return '{"id":"' + option.value + '","attribute":"' + attribute + '"}';
});
$("#" + savedSelectionsId).val("[" + values + "]");
}
</script>
以上是 如何使用属性创建增强的HTML传输框 的全部内容， 来源链接： utcz.com/qa/259179.html
