web-dev-qa-db-ja.com

select2マルチ選択で値を事前選択する方法は？

私はこのような複数選択をしています：

<select multiple="multiple" class="myList">
        <option value="1" selected="selected">Apple</option>
        <option value="2" selected="selected">Mango</option>
        <option value="3" selected="selected">Orange</option>
</select>

ここで、選択ボックスで選択する必要があるオプションとは別に、リモートソースから値を提供する追加のajax機能が必要でした。

これがselect2の私のコードです

$(function(){
    $(".myList").each(function(){

                $(this).select2({
                placeholder: "Search for fruits",
                minimumInputLength: 2,
                multiple: true,
                id: function(e) { 
                return e.id+":"+e.name; },
                ajax: {
                    url: "https://localhost:8443/fruit_search",
                    dataType: 'json',
                    data: function(term, page) {
                        return {
                            q: term
                        };
                    },
                    results: function(data, page) {
                    var frts=[];
                        $.each(data,function(idx,Frt){
                            frts[frts.length]=Frt;
                        });
                        return {
                            results: frts
                        };
                    }
                },
                initSelection: function(element, callback) {
                    var data = [];
                },
                formatResult: formatResult,
                formatSelection: formatSelection
                });
        });

});

しかし、私はエラーを得ています：

エラー：オプション 'id'は、<select>要素にアタッチされている場合、Select2では許可されません。

しかし、<input type="hidden">を使用する場合、事前選択されたオプションをどこに保持する必要がありますか？ select2ボックスが表示されたときにそれらをどのように表示しますか？

javascriptjqueryjquery-select2
14
JavaTechnical

値しかない場合は、'val'は、このように事前に選択された値を取得します。

var PRESELECTED_FRUITS = [ '1','2','3'];

$('.myList').select2({}).select2('val', PRESELECTED_FRUITS);
13
Manjeet Singh Chauhan

「data」関数を使用して、初期値を設定できます。

var PRESELECTED_FRUITS = [
    { id: '1', text: 'Apple' },
    { id: '2', text: 'Mango' },
    { id: '3', text: 'Orange' }
];

$('.myList').select2('data', PRESELECTED_FRUITS)

注：「val」関数は初期値を設定するもう1つの方法ですが、その関数でのみIDを指定します。その場合、IDからオブジェクトを構築する「initSelection」関数を提供する必要があります。

また、「id」オプションは、非表示の入力の使用を強制する唯一のオプションではないことにも注意してください。 select要素で「ajax」オプションを使用することもできません。

「id」オプションに関しては、私はあなたがそれを必要とするとは思わない。適切なidおよびtextプロパティを持つオブジェクトの配列を構築するか、サーバーにそれらのプロパティを持つオブジェクトを返すように、ajaxの「結果」関数にロジックを配置するだけです。

jsfiddleデモ

8
John S

値を事前設定するには、 'val'プロパティを使用して、選択した値を事前設定します。

$(this).select2({
            val: ["1","2","3"]
    }

しかし、なぜ 'id'関数を削除しないのですか？可能であれば、id関数を使用せずにサーバーから正しい「id」を返すことができます。

5
Ferry Kranenburg

値をHTMLにロードすることもできます。

<select class="selector" multiple="multiple" >
    <option selected value="1">Apple</option>
    <option selected value="2">Mango</option>
    <option selected value="3">Orange</option>
</select>

そしてselect2をそれに接続します：

$(".selector").select2({
    width: 'inherit',
    minimumInputLength: 2,
    minimumResultsForSearch: 10,
    placeholder: "Search for fruits",
    ajax: {
        delay: 1000,
        url: "/bla_foo",
        dataType: 'json',
        type: "GET",
    }
})

そしてselect2はフォームに事前入力します。

1
Pinguin Pinguin
$("#select2").select2('data', {id: '3', text: 'myText'});
0
Manoj