通過javascript設置Multiple Select2元素的數據

Question

我通過Javascript，ajax和jquery將多個值加載到Select2元素中。雖然數據加載正常並且可以在加載後訪問，但我無法在Select2元素中設置存儲的數據。

編輯：我正在使用Select2 v3.5。

我的代碼：

HTML：

<input class="jsData" style="width: 100%" id="select2Data"></input> 

的Javascript：

$(".jsData").select2({ 
         ajax: { 
          minimumInputLength: 4, 
          contentType: 'application/json', 
          url: '<%=Url.Action("GetData","Controller")%>', 
          type: 'POST', 
          dataType: 'json', 
          data: function (term) { 
           return { 
            sSearchTerm: term 
           }; 
          }, 
          results: function (data) { 
           return { 
            results: $.map(JSON.parse(data), function (item) { 
             return { 
              text: item.term, 
              slug: item.slug, 
              id: item.Id 
             } 
            }) 
           }; 
          } 
         }, 
         multiple: true 
        }); 

所以，這創造了一個選擇二元素在那裏我可以遍歷，並從不同的數據庫和裝載數據我輸入的內容。我還可以訪問使用下面的行中的數據（由用戶輸入的）：

$('.jsData').select2('val') 

上述線返回一個數組，我可以存儲在數據庫中。我目前的目標是將存儲的數據重新放回到Select2元素中。任何在這件事情上的幫助將是最受歡迎的。

更新：一個相關鏈接，我要完成： https://select2.github.io/examples.html#programmatic

我想設置在選擇二多個元素的例子。但是，區別在於Select2文檔中的示例在加載頁面時帶來了數據，而我將進行訪問以獲取數據。

Answer 1

這個Select2 v3.5.4 docs有點混亂。我認爲文檔中存在誤導性的拼寫錯誤。

首先，請注意，當我從遠程源檢索數據時，我將它作爲格式爲{id: ##, name: NAME}的對象返回。

第一步是添加initSelection參數並傳遞該函數以檢索先前選擇的項目。

下一步，我認爲存在拼寫錯誤，將定義formatSelection參數（而不是文檔中指定的formatResult）。該功能定義瞭如何顯示先前選擇的結果。在這種情況下，我只是顯示結果的name屬性。

formatResult參數定義瞭如何顯示新選擇的選項。你會注意到formatResult和formatSelection下面是一樣的。我可以重用一個函數，但覺得這對於演示來說更好。

$(document).ready(function() { 
    function formatResult(data) { 
    return data.name; 
    }; 

    function formatSelection(data) { 
    return data.name; 
    } 

    $(".jsData").select2({ 
    ajax: { 
     minimumInputLength: 4, 
     url: "https://jsonplaceholder.typicode.com/users", 
     type: "GET", 
     dataType: "json", 
     results: function(data) { 
     return { 
      results: $.map(data, function(user) { 
      return { 
       name: user.name, 
       id: user.id 
      }; 
      }) 
     }; 
     } 
    }, 
    initSelection: function(element, callback) { 
     var id = $(element).val(); 
     if (id !== "") { 
     $.ajax("https://jsonplaceholder.typicode.com/users/" + id, { 
      dataType: "json" 
     }).done(function(data) { 
      callback(data); 
     }); 
     } 
    }, 
    formatResult: formatResult, 
    formatSelection: formatSelection, 
    multiple: true 
    }); 
}); 

下面是完整的工作示例：

$(document).ready(function() { 
 
    function formatResult(data) { 
 
    return data.name; 
 
    }; 
 
    
 
    function formatSelection(data) { 
 
    return data.name; 
 
    } 
 

 
    $(".jsData").select2({ 
 
    ajax: { 
 
     minimumInputLength: 4, 
 
     url: "https://jsonplaceholder.typicode.com/users", 
 
     type: "GET", 
 
     dataType: "json", 
 
     results: function(data) { 
 
     return { 
 
      results: $.map(data, function(user) { 
 
      return { 
 
       name: user.name, 
 
       id: user.id 
 
      }; 
 
      }) 
 
     }; 
 
     } 
 
    }, 
 
    initSelection: function(element, callback) { 
 
     var id = $(element).val(); 
 
     if (id !== "") { 
 
     $.ajax("https://jsonplaceholder.typicode.com/users/" + id, { 
 
      dataType: "json" 
 
     }).done(function(data) { 
 
      callback(data); 
 
     }); 
 
     } 
 
    }, 
 
    formatResult: formatResult, 
 
    formatSelection: formatSelection, 
 
    multiple: true 
 
    }); 
 
});

.jsData { 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" rel="stylesheet"/> 
 

 
<input class="jsData" style="width: 100%" id="select2Data" value="10"></input>