「クエリ関数がSelect2未定義エラーに対して定義されていません」

Select2を使用しようとすると、複数のアイテム入力/テキストフィールドでこのエラーが発生します。

"query function not defined for Select2 undefined error"

このgoogleグループスレッドでカバー

問題は、select2によって追加された余分なdivが原因でした。Select2は、作成された選択をラップするために、クラス「select2-container form-select」を持つ新しいdivを追加しました。したがって、次に関数をロードしたときに、select2がdiv要素にアタッチされているため、エラーがスローされていました。セレクターを変更しました...

特定のタグ名「select」を持つ接頭辞select2 css識別子：

$('select.form-select').select2();

このエラーメッセージは一般的すぎます。他の可能なソースの1つは、select2()すでに「select2ed」された入力でメソッドを呼び出そうとしていることです。

空の入力を初期化する場合は、次のようにします。

$(".yourelement").select2({
 data: {
  id: "",
  text: ""
 }
});

以下の最初のコメントを読んでください。それは、私の回答でコードを使用する理由と時期を説明しています。

また、select2を2度初期化しないようにこの問題が発生しました。

私にとって、この問題は、正しいdata-ui-select2属性の設定に要約されました。

<input type="text" data-ui-select2="select2Options.projectManagers" placeholder="Project Manager" ng-model="selectedProjectManager">


$scope.projectManagers = { 
  data: []  //Must have data property 
}

$scope.selectedProjectManager = {};

data上のプロパティを削除する$scope.projectManagersと、このエラーが発生します。

この問題は、select2選択ボックスをどのように構築していたかということになります。私が持っていた1つのJavaScriptファイルで...

$(function(){
  $(".select2").select2();
});

そして別のjsファイルでオーバーライド...

$(function(){
    var employerStateSelector = 
                $("#registration_employer_state").select2("destroy");
    employerStateSelector.select2({
    placeholder: 'Select a State...'
    });
});

2番目のオーバーライドをウィンドウロードイベントに移動すると、問題が解決しました。

$( window ).load(function() {
  var employerStateSelector = 
              $("#registration_employer_state").select2("destroy");
  employerStateSelector.select2({
    placeholder: 'Select a State...'
  });
});

この問題はRailsアプリケーション内で発生しました

テキストボックスでajaxを使用するときにも同じエラーが発生し、テキストボックスのクラスselect2を削除して、次のようにIDでselect2をセットアップすることで解決します。

$(function(){
  $("#input-select2").select2();
});

セレクタが未定義の要素を返すようです（そのため undefined error返されます）

要素が実際に存在する場合は、select2にinput何も指定せずに要素でselect2を呼び出します。select2は、データをフェッチする場所です。通常、1人がを呼び出します.select2({data: [{id:"firstid", text:"firsttext"}])。

ajaxを使用するときにも同じエラーが発生しました。

select2でフォームをレンダリングするためにajaxを使用している場合、input_htmlクラスは、ajaxを使用してレンダリングされていないクラスとは異なる必要があります。なぜそれがこのように機能するのかはよくわかりません。

if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

オプションにクエリが存在しない場合にスローされます。内部的には、パラメーターに対して以下のいずれかを必要とするチェックが維持されています

• ajax
• タグ
• データ
• クエリ

したがって、select2にこれらの4つのオプションのいずれかを指定するだけで、期待どおりに機能するはずです。

同じエラーが発生しました。私はselect2-3.5.2を使用しています

これはエラーがあった私のコードでした

    $('#carstatus-select').select2().val([1,2])

以下のコードは問題を修正しました。

    $('#carstatus-select').val([1,2]);

私は複雑なWebアプリを持っていて、このエラーがスローされた理由を正確に理解できませんでした。スローされるとJavaScriptが異常終了していました。

select2.jsで私は変更しました：

        if (typeof(opts.query) !== "function") {
            throw "query function not defined for Select2 " + opts.element.attr("id");
        }

に：

        if (typeof(opts.query) !== "function") {
            console.error("query function not defined for Select2 " + opts.element.attr("id"));
        }

これですべてが正常に動作しているように見えますが、コードで正確に何がエラーを引き起こしているのかを調べたい場合に備えて、まだエラーでログインしています。しかし、今のところ、これで十分です。

使用する ：

try {
    $("#input-select2").select2();
}
catch(err) {

}