web-dev-qa-db-ja.com

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

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

"query function not defined for Select2 undefined error"
javascriptruntime-errorjquery-select2
117
Daniel Morris

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

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

特定のタグ名「select」を持つプレフィックスselect2 css識別子：

$('select.form-select').select2();
227
Daniel Morris

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

14
Martin D

空の入力を初期化する場合、これを行います：

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

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

12
kappaallday

また、この問題が発生したため、select2を2回初期化しないようにしてください。

10
Pedro Dias

私にとってこの問題は、正しい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 = {};

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

6
parliament

この問題は、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アプリケーション内で開花しました

5
keaplogik

テキストボックスでajaxを使用するときにも同じエラーが発生し、remove class select2 of textbox and setup select2 by id like：

$(function(){
  $("#input-select2").select2();
});
3
Hoàng Nghĩa

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

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

2
mfamador

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

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

2
koppor

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

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

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

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

    $('#carstatus-select').val([1,2]);
0
Jyotheeswar Reddy
if (typeof(opts.query) !== "function") {
    throw "query function not defined for Select2 " + opts.element.attr("id");
}

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

  • アヤックス
  • タグ
  • データ
  • 問い合わせ

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

0
Sahil Jain

複雑な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"));
        }

今ではすべてが正常に動作しているように見えますが、エラーの原因となっているコードの内容を正確に把握しようとする場合に備えて、エラーが記録されています。しかし、今のところ、これは私にとって十分な修正です。

0
Luke Wenke