web-dev-qa-db-ja.com

Select2 ajaxの値をプログラムで設定する

Select2のオートコンプリート入力（SonataAdminを介して構築）がありますが、私の人生では、既知のキー/値ペアにプログラムで設定する方法を理解できません。

JS Fiddle here があります。これはおおよその内容を示しています。知りたいのは、ボタンにどの関数をアタッチできるかです。

  • select2フィールドには、ユーザーにテキスト「NEW VALUE」が表示されます。
  • select2フィールドは、フォームがサーバーに送信されるときに「1」の値を送信します

ページ上のさまざまな入力に対して呼び出されるjQueryとSelect2 dataおよびvalメソッドのあらゆる種類の組み合わせを試しましたが、何も機能していないようです...確かにこれを行う方法はありますか？

-編集-

以下の受け入れられた答えは非常に有用であり、選択を初期化する正しい方法に光を当てるのに役立ち、initSelectionの目的を説明します。

そうは言っても、ここでの私の最大の間違いは、変化を引き起こそうとしていた方法であったようです。

私が使用していた：

$(element).select2('data', newObject).trigger('change');

ただし、これにより、select2のchangeイベント内にaddオブジェクトが空になります。

代わりに、次を使用する場合：

$(element).select2('data', newObject, true);

その後、コードは正常に機能し、newObjectがselect2のchangeイベントで使用可能になり、値が正しく設定されます。

この追加情報が他の人に役立つことを願っています！

javascriptjqueryjquery-select2sonata-admin
28
caponica

注：質問とこの回答はSelect2 v3用です。 Select2 v4には、v3とは非常に異なるAPIがあります。

問題はinitSelection関数だと思います。その関数を使用して初期値を設定していますか？ Select2のドキュメントがその目的のように聞こえるのは知っていますが、「本質的にこれはid-> object mapping functionである」とも書かれており、それは実装方法ではありません。

何らかの理由で.trigger('change')を呼び出すと、initSelection関数が呼び出され、選択した値が「ENABLED_FROM_JS」に戻ります。

initSelection関数を削除して、代わりに以下を使用して初期値を設定してください。

_autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});
_

jsfiddle

注：OPはformatResultおよびformatSelectionオプションを提供しています。提供されているように、これらのコールバック関数は、アイテムに「テキスト」プロパティではなく「ラベル」プロパティがあることを想定しています。 ほとんどのユーザーの場合、次のようになります：

_autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});
_

initSelection関数の詳細：

Select2 documentation で「initSelection」を検索すると、要素に初期値があり、要素の.val()関数が呼び出されたときに使用されることがわかります。これは、これらの値がidのみで構成されており、Select2がデータオブジェクト全体を必要としているためです（一部は正しいラベルを表示できるようにするため）。

Select2コントロールが静的リストを表示している場合、initSelection関数は簡単に記述できます（Select2がそれを提供できるようです）。その場合、initSelection関数はデータリストでidを検索し、対応するデータオブジェクトを返すだけで済みます。 （ここでは「戻る」と言いますが、実際にはデータオブジェクトを返しません。コールバック関数に渡します。）

あなたの場合、要素には初期値がないため（html内）、initSelection関数を指定する必要はなく、その.val()メソッドを呼び出すこともありません。 。 .select2('data', ...)メソッドを使用してプログラムで値を設定し続けるだけです。

（ajaxを使用する）オートコンプリートにinitSelection関数を提供する場合、おそらくデータオブジェクトを構築するためにajax呼び出しを行う必要があります。

27
John S

これはバージョン4以降でテストされていることに注意してください

この議論を見つけて、ようやく進歩することができました： https://groups.google.com/forum/#!topic/select2/TOh3T0yqYr4

最後のコメントは、私が正常に使用できた方法を示しています。

例：

$("#selectelement").select2("trigger", "select", {
    data: { id: "5" }
});

これは、ajaxデータと一致し、値を正しく設定するのに十分な情報のようです。これは、カスタムデータアダプターで非常に役立ちました。

39
Mark

初期値を設定するには、jQueryを使用してselect要素に必要なオプションタグを追加し、select2のvalメソッドでこれらのオプションを選択済みとして定義し、最後にselect2の「変更」イベントをトリガーする必要があります。

1.-$('#selectElement').append('<option value=someID>optionText</option>');
2.-$('#selectElement').select2('val', someID, true);

3番目のブール引数は、select2にchangeイベントをトリガーするように指示します。

詳細については、 https://github.com/select2/select2/issues/3057 を参照してください

10
nespapu

注意してください、「検証済み」コメントに間違いがあります。

autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});

正しい方法は

autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});

textの代わりにlabelを使用します

7
lucbonnin

例から https://select2.github.io/examples.html

プログラムによるアクセス：

var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
3
Valentin Petkov

これです：

$("#tag").select2('data', { id:8, title: "Hello!"});
1
francisco garcia

.trigger('change')をフィドルから削除すると、Object {id: 1, label: "NEW VALUE"}（ログは値が変更される前なので、2回クリックする必要があります）。それはあなたが探しているものですか？

1
vesse

Select2バージョン4+では、実際に特別なことは必要ありません。最後に「変更」イベントトリガーを使用した標準jQueryが機能します。

var $select = $("#field");
var items = {id: 1, text: "Name"}; // From AJAX etc
var data = $select.val() || [];    // If you want to merge with existing

$(items).each(function () {
  if(!$select.find("option[value='" + this.id + "']").length) {
    $select.append(new Option(this.text, this.id, true, true));
  }
  data.Push(this.id);
});

$select.val(data).trigger('change'); // Standard event notifies select2

Select2ドキュメントには基本的な例があります。 https://select2.org/programmatic-control/add-select-clear-items

1
Ryan

あなたがしなければならないのは、値を設定してから実行することです：$ ('#myselect').select2 ();または$ ('select').select2 ();。そして、すべてが非常によく更新されます。

1
Del Eraser

複数のオプションでselect2を使用する場合、次の構成を使用します。

$(element).select2("data", $(element).select2("data").concat(newObject), true);

jqueryselect2複数セット連結

1
McAndrews

まだバージョン3.5以降を使用している場合。 select2.jsをページにどのように参照するかを確認してください。非同期負荷を使用する場合、または負荷を延期する場合。このプラグインの動作は異なる場合があります。

言及する考え。

0
MonkeyDLuffy

私の状況では、PHPを使用して、事前に選択したオプションをHTMLサーバー側にレンダリングすることができました。

ページの読み込み中に、オプションの値はすでにわかっているため、<select name="team_search"></select>は次のようになりました。

        <select name="team_search">
            <?php echo !empty($preselected_team) 
                    ? '<option selected="selected" value="'. $preselected_team->ID .'">' . $preselected_team->team_name . '</option>' 
                    : null ?>
        </select>';

ご覧のとおり、$preselected_team使用可能selected属性、valueおよびラベルが設定されたオプションでレンダリングします。そして、値がない場合、オプションはレンダリングされません。

このアプローチは常に可能とは限りません（OPの場合は言及されていません）が、JavaScriptの実行に先立ってページをロードする準備ができるという追加の利点があります。

0
JDandChips

バージョン3.5.3の場合

    $(".select2").select2('data',{id:taskid,text:taskname}).trigger('change');

John S 'answer に基づいています。 select2を初期化する際にinitSelectionを初期化する場合にのみ、上記が機能しますhoweverオプションは初期化されていません。

$(".select2").select2({
      //some setup
})
0
Pastlifeuknow