如何使用屬性創建增強的HTML傳輸框

Question

我需要使用HTML，JavaScript和JQuery創建增強傳輸框。

我有一組用戶可以選擇並與屬性相關聯的選項。選擇和取消選擇必須用兩個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>

視覺的要求：

Answer 1

下面就來挑戰的解決方案。開始時設置的變量使得該解決方案易於配置和維護。

當頁面顯示時，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>