web-dev-qa-db-ja.com

Select2はファイルからAjaxでデータをロードします

listofValues.phpというスクリプトがあります。このスクリプトは、データベースにクエリを実行し、JSON形式の値を返します。

必要なのは、これらの値をselect2dataメンバーに渡すことです。一度ロードする必要があります。

この例 で説明されているように、select2 input（term）からlistofValues.phpに値を渡す必要はありません。

$('#select2div').select2({
        //data:[],
    ajax: {
        dataType: "json",
        url: "listofvalues.php",    
        success: function (data) {          
        }
    }

これを手伝ってくれませんか。

ajaxjqueryjquery-select2
9
user2725585

簡単な例

listofvalues.phpから返されるオブジェクトの形式を知っておくと便利ですが、簡単にするために、次のようになっていると仮定しましょう。

[ {"id": 1, "text": "option1"},
  {"id": 2, "text": "option2"},
  {"id": 3, "text": "option3"} ]

これは最も使いやすい形式です。デフォルトでは、select2はプロパティ名idおよびtextのオブジェクトを処理し、それらをドロップダウンリストにレンダリングできます。したがって、select2の初期化は次のようになります。

$('#select2div').select2({
    ajax: {
        dataType: "json",
        url: "listofvalues.php",
        results: function (data) {
            return {results: data};
        }
    }
});

少しトリッキーな例

ここで、listofvalues.phpからのデータが便利な命名規則に従っていないと仮定しましょう。

[ {"id": 1, "firstName": "John", "lastName": "Lennon"},
  {"id": 2, "firstName": "Paul", "lastName": "McCartney"},
  {"id": 3, "firstName": "George", "lastName": "Harrison"},
  {"id": 4, "firstName": "Ringo", "lastName": "Starr"} ]

出力を処理する関数を設定する必要があります。

function formatValues(data) {
    return data.firstName + ' ' + data.lastName;
}

そして私たちのselect2初期化：

$('#select2div').select2({
    ajax: {
        dataType: "json",
        url: "listofvalues.php",
        results: function (data) {
            return {results: data};
        }
    },
    formatResult: formatValues
});

乗り方を教えてください。

28
Simon Adcock