複数のSelect2要素のデータをJavaScriptで設定する

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 
        }); 

だから、これは私が依存してデータベースおよび負荷データから横切ることができるSelectセレクト要素を作成します私が入力したもの私はまた、次の行を使用して、（ユーザによって入力された）データにアクセスすることができる：

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

上の行は、私は、データベースに格納することができる配列を返します。私の現在の目的は、格納されたデータをSelect2要素に戻すことです。この問題の援助は大歓迎です。

アップデート：私は達成したい何のための関連リンク： https://select2.github.io/examples.html#programmatic

私はSelectセレクトで複数の要素を設定する例をしたいです。しかし、違いは、Select2ドキュメントの例では、ページの読み込み時にデータを取得し、データを取得するためのトリップを行うことになります。

Answer 1

Select2 v3.5.4 docsはこれを少し混乱させます。私は誤解を招くような誤植があると思います。

まず、リモートソースからデータを取得するときに、{id: ##, name: NAME}という形式のオブジェクトとして返すことに注意してください。

最初の手順は、initSelectionパラメータを追加し、以前に選択した項目を取得する関数を渡すことです。

私は、入力ミスがあると考えている次のステップは、ではなく、formatSelectionパラメータを定義することです。この関数は、以前に選択した結果の表示方法を定義します。この場合、私は単に結果の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 
    }); 
}); 

はここで完全な作業例です：それは小道具のように見えるSelectセレクトドキュメントで

$(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>