web-dev-qa-db-ja.com

Ajaxを使用したSelect2でのロード時の初期値の設定

Ajaxでselect2コントロールをセットアップしています（単一と複数の両方があります）。ページの読み込みにいくつかの値を設定しようとしていますが、これを機能させることはできません。 select2のコードは次のとおりです。

function AjaxCombo(element, url, multival ){  // multival = true or false
  multival = multival || false;
  $(element).select2({
   minimumInputLength: 2,
   multiple: multival,
   separator: '|',
   ajax: {
     url: url,
     dataType: 'json',
     data: function (term, page) {
        var targetname = $(this).attr('name');
        var target = targetname.slice(targetname.indexOf("[")+1, targetname.indexOf("]"));
       return {
         targettype: "search",
         target: target,
         search: term
       };
     },
     results: function (data, page) {
       return { results: data };
     }
   }
 });
}
AjaxCombo(".ajaxselect", "includes/linkedcontrol.php", false);
AjaxCombo(".ajaxmultiselect", "includes/linkedcontrol.php", true);

Ajaxコンボは正常に動作し、初期値のロードのみで問題が発生します。以下のコードを試してみましたが、動作させることができませんでした。

initSelection : function (element, callback) {
    var elementText = $(element).attr('data-initvalue');
    callback(elementText);
}

PHPからのHTMLは次のように返されます。

<input name='header[country]' class='ajaxselect'  data-initvalue='[{"id":"IN","name":"India"}]' data-placeholder='Select Country' value='' />

Phpから値が入力されていることがわかりますが、jqueryのみに問題があります。コントロールの私の値はUS | United States of America。 formatオプションを使用せずにデフォルトとしてこのフォーマットを取得するためにselect2ソースを編集したと思います。

誰かがデフォルト値を入力するのを手伝ってもらえますか？前もって感謝します。

編集：この質問はSelect2バージョン<4.0に関連しています。このオプションはv4.0から削除され、現在でははるかに簡単になっています。

jqueryajaxjquery-select2
34
Ravi

initSelectionとして指定している関数は、最初のvalueを引数として呼び出されます。したがって、valueが空の場合、関数は呼び出されません。
指定するとvalue='[{"id":"IN","name":"India"}]' の代わりに data-initvalue関数が呼び出され、選択が初期化されます。

5
user1983983

たぶんあなたのためにこの仕事！これは私のために働く...

initSelection: function (element, callback) {

            callback({ id: 1, text: 'Text' });
}

コードのスペルが正しいことを非常によく確認してください。私の問題はinitSelectionにあり、initselectionがありました。

24
JD - DC TECH

新しいバージョンに更新されました：

ここからこのソリューションをお試しください http://jsfiddle.net/EE9RG/430/

$('#sel2').select2({
multiple:true,
ajax:{}}).select2({"data": 
     [{"id":"2127","text":"Henry Ford"},{"id":"2199","text":"Tom Phillips"}]});
15
MKK

Ravi、4.0.1-rc.1用：

  1. _<option>_内にすべての_<select>_要素を追加します。
  2. _select2_ init関数の後に$element.val(yourarray).trigger("change");を呼び出します。

HTML：

_<select name="Tags" id="Tags" class="form-control input-lg select2" multiple="multiple">
       <option value="1">tag 1</option>
       <option value="2">tag 2</option>
       <option value="3">tag 3</option>
 </select>
_

JS：

_var $tagsControl = $("#Tags").select2({
        ajax: {
            url: '/Tags/Search',
            dataType: 'json',
            delay: 250,
            results: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.text,
                            id: item.id
                        }
                    })
                };
            },
            cache: false
        },
        minimumInputLength: 2,
        maximumSelectionLength: 6
    });

    var data = [];
    var tags = $("#Tags option").each(function () {
        data.Push($(this).val());
    });
    $tagsControl.val(data).trigger("change");
_

この問題は報告されましたが、まだ解決していません。 https://github.com/select2/select2/issues/3116#issuecomment-14656875

14
Lazaro Fernandes Lima

データを渡すための非常に奇妙な方法。サーバーからJSON文字列/オブジェクトを取得してから、値やものを割り当てることを好みます。

とにかく、このvar elementText = $(element).attr('data-initvalue');を実行すると、これは[{"id":"IN","name":"India"}]になります。その結果は、id（ "IN"）およびname（ "India"）の実際の値を取得できるように、上記のように解析する必要があります。現在、複数選択と単一値Select2の2つのシナリオがあります。

単一の値：

$(element).select2({
    initSelection : function (element, callback) {
        var data = {id: "IN", text: "INDIA"};
        callback(data);
    }//Then the rest of your configurations (e.g.: ajax, allowClear, etc.)
});

複数選択

$("#tags").select2({
    initSelection : function (element, callback) {
        var countryId = "IN"; //Your values that somehow you parsed them
        var countryText = "INDIA";

        var data = [];//Array

        data.Push({id: countryId, text: countryText});//Push values to data array


        callback(data); //Fill'em
    }
});

今ここにトリックがあります！ belov91が提案したように、これを入れなければなりません...

$(element).select2("val", []);

単一値または複数値のSelect2であっても。一方、Select2 ajax関数を<select>タグに割り当てることはできません。これは<input>でなければなりません。

あなた（または誰か）を助けたことを願っています。

またね.

12
Daniel Díaz Astudillo

私は追加しました

initSelection: function (element, callback) {

      callback({ id: 1, text: 'Text' });
}

しかしまた

.select2('val', []);

最後に。

これで問題が解決しました。

5
belov91
var elem = $("#container").find("[name=elemMutliOption]");
for (var i = 0; i < arrDynamicList.length; i++)
{
   elem.find("option[value=" + arrDynamicList[i] + "]").attr("selected", "selected");
}
elem.select2().trigger("change");

これは、ページの複数のセクションに同じビューを使用しているユーザーに有効です。ページのデフォルトの自動設定にも同じように機能すると言われていますOR 。

「FOR」は、既存のオプションがすでにDOMにロードされている配列を通過します。

1
gabisajr

ページの読み込み後に値を変更します

$('#data').val('').change();

1
Harry Bosh

次を使用できます

$(element).select2("data",[ { id: result.id, text: "جابر احمد الصباح" },
    { id: 2, text: "خليل محمد خليل" }]);
0
Motasem Alsaqqa

遅く:(しかし、これはあなたの問題を解決すると思います。

 $("#controlId").val(SampleData [0].id).trigger("change");

データバインディング後

 $("#controlId").select2({
        placeholder:"Select somthing",
        data: SampleData // data from ajax controll
    });
    $("#controlId").val(SampleData[0].id).trigger("change");
0
Mahfuzur Rahman

私の場合、問題は出力のレンダリングでした。したがって、ajaxデータがまだ存在しない場合はデフォルトのテキストを使用しました。

  templateSelection: function(data) {
    return data.name || data.element.innerText;
  }
0
Jonas Sciangula Street