5

私はすでにthis、this、thisを読んだことがありますが、ドキュメントによれば最も重要な here ですが、どれもうまくいきません。AJAX select2 を使用しようとしています。一般的な「選択」項目を作成しようとしています。

data-select2-jsonしたがって、属性を持つすべての要素に対してselect2、値にある ajax URL を適用しdata-select2-jsonます。

$('[data-select2-json!=""][data-select2-json]').each(function() {
    var url = $(this).attr('data-select2-json');
    var pg_size = $(this).attr('data-select2-page-size') | 30;
    $(this).select2({
        language: language_code,
        tokenSeparators: [',', ' '],
        ajax: {
            url: url,
            dataType: 'json',
            delay: 300,
            data: function (params) {
                return {
                    q: params.term, // -> q=[search term]
                    page: params.page // -> page=[no page]
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                console.log(data.items);
                return {
                    results: data.items,
                    pagination: {
                      more: (params.page * pg_size) < data.total
                    }
                };
            },
            cache: true
        },
        // let our custom formatter work
        escapeMarkup: function (markup) { return markup; },
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection
    });
});

それはうまくいきます！

うまくいきます

サーバーが送信する JSON は、常に次のようにフォーマットされます。

{"items":
    [{"item": "Fran\u00e7ais", "id": 1},
     {"item": "Finlandais", "id": 5},
     {"item": "Chinois simplifi\u00e9", "id": 15}
    ],
"total": 3}

これは、ドキュメントにある AJAX サンプルに非常に近いものです。私の問題は AJAX の初期化です: HTML に値を追加したい:

<select multiple="multiple" class="form-control"
        data-select2-json="/fr/chez-moi/tags/langues"
        multiple="multiple"
        name="known_languages">
    <option value="1" selected="selected">Français</option>
    <option value="2" selected="selected">Chinois simplifié</option>
</select>

そしてselect2（=$(this).select2({..上記のコード）で初期化しますが、これは機能せず、空白の値が返されます：

空白値

注意:ここでケビン・ブラウンが提供した解決策も機能せず、まったく同じ結果が得られます。

もう 1 つの解決策は、AJAX で " &init=1" (またはそのようなもの) のようなパラメーターを使用して URL に要求することです。これにより、サーバーはchecked: true各値のようなパラメーターを追加して結果を送信し、それらの値で呼び出しselect2ます。

事前入力の方法に関するドキュメントには明確なものはありませんselect2。どうすればいいですか？

ここに私の他の機能があります：

function item_or_text(obj) {
    if (typeof(obj.item)!='undefined') {
        return (obj.item.length ? obj.item : obj.text);
    }
    return obj.text;
}

function formatRepo(data) {
    if (data.loading) return data.text;
    var markup = item_or_text(data);
    console.log('formatRepo', data, markup);
    return markup;
}

function formatRepoSelection(item) {
    var retour = item_or_text(item);
    console.log('formatRepoSelection', item, item.item, retour);
    return retour;
}
4

2 に答える 2

3

Select2 Examplesページで提供されているサンプル コードを使用して、jsfiddle で動作するサンプルを作成しました。あなたのような複数を受け入れるように、例の select タグを変更する必要がありました。

<select multiple="multiple" ...

また、デフォルトで選択された 2 つ目のオプションを追加しました。

<option value="3620194" selected="selected">select2/select2</option>
<option value="317757" selected="selected">Modernizr/Modernizr</option>

フィドルを見ると、自分のフィドルがどのように機能するかがわかります。

templateSelection: formatRepoSelectionメソッドのコードが含まれていません。私の推測では、その方法が問題の原因です。例のページで使用されているコードは次のとおりです。

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

あなたのformatRepoSelectionコードが何であるかはわかりませんが、次のように変更すると、問題は解決すると思います。

function formatRepoSelection(repo) {
  return repo.item;
}
于 2015-12-22T04:27:46.560 に答える
0

私はこれを次のように解決します: select 要素で select2() を実行する直前に、初期値を取得します:

var initval = selector.attr("value");

select2 に変換した後、initval でオプションを作成します。

if (initval) {
    var option = new Option(initval, initval, true, true);
    selector.append(option).trigger('change');
}

複数値選択要素についても同様のことができます。

于 2018-08-03T08:53:01.070 に答える