“ ฟังก์ชันการสืบค้นไม่ได้กำหนดไว้สำหรับข้อผิดพลาดที่ไม่ได้กำหนด Select2”

พยายามใช้ Select2 และได้รับข้อผิดพลาดนี้ในช่องป้อนข้อมูล / ข้อความหลายรายการ:

"query function not defined for Select2 undefined error"

อยู่ในชุดข้อความของกลุ่ม Google นี้

ปัญหาเกิดจาก div พิเศษที่ถูกเพิ่มโดย select2 Select2 ได้เพิ่ม div ใหม่ด้วยคลาส "select2-container form-select" เพื่อตัดการเลือกที่สร้างขึ้น ดังนั้นในครั้งต่อไปที่ฉันโหลดฟังก์ชันข้อผิดพลาดจึงเกิดขึ้นเนื่องจาก select2 ถูกแนบกับองค์ประกอบ div ฉันเปลี่ยนตัวเลือกของฉัน ...

คำนำหน้า select2 ตัวระบุ css ที่มีชื่อแท็กเฉพาะ "select":

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

ข้อความแสดงข้อผิดพลาดนี้กว้างเกินไป หนึ่งในแหล่งที่มาที่เป็นไปได้อื่น ๆ คือคุณกำลังพยายามเรียกselect2()method ในอินพุต "select2ed" อยู่แล้ว

ในกรณีที่คุณเริ่มต้นอินพุตว่างให้ทำสิ่งนี้:

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

อ่านความคิดเห็นแรกด้านล่างอธิบายว่าเหตุใดคุณจึงควรใช้รหัสในคำตอบของฉัน

ฉันมีปัญหานี้เช่นกันตรวจสอบให้แน่ใจว่าคุณไม่ได้เริ่มต้น select2 สองครั้ง

สำหรับฉันปัญหานี้เกิดขึ้นเพื่อตั้งค่าแอตทริบิวต์ 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 ของฉัน ในไฟล์จาวาสคริปต์หนึ่งไฟล์ที่ฉันมี ...

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

และในไฟล์ js อื่นแทนที่ ...

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

การย้ายการแทนที่ครั้งที่สองไปยังเหตุการณ์การโหลดหน้าต่างช่วยแก้ปัญหาได้

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

ปัญหานี้เกิดขึ้นในแอปพลิเคชัน Rails

ฉันยังได้รับข้อผิดพลาดเดียวกันเมื่อใช้ ajax กับ textbox จากนั้นฉันแก้ปัญหาโดยลบ class select2ของ textbox และตั้งค่า select2 โดย id เช่น:

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

ดูเหมือนว่าตัวเลือกของคุณจะส่งคืนองค์ประกอบที่ไม่ได้กำหนดไว้ (ดังนั้นจึงundefined errorถูกส่งกลับ)

ในกรณีที่องค์ประกอบนั้นมีอยู่จริงคุณกำลังเรียกใช้ select2 บนinputองค์ประกอบโดยไม่ต้องจัดหาสิ่งใดให้กับ select2 ซึ่งควรดึงข้อมูลมาจากที่ใด .select2({data: [{id:"firstid", text:"firsttext"}])โดยปกติแล้วสายหนึ่ง

ยังได้รับข้อผิดพลาดเดียวกันเมื่อใช้ ajax

หากคุณใช้ ajax เพื่อสร้างฟอร์มด้วย select2 คลาส input_html จะต้องแตกต่างจากที่ไม่ได้แสดงโดยใช้ ajax ไม่ค่อยแน่ใจว่าทำไมมันถึงได้ผลเช่นนี้

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

สิ่งนี้ถูกส่งเนื่องจากไม่มีแบบสอบถามในตัวเลือก ภายในมีการตรวจสอบซึ่งต้องใช้อย่างใดอย่างหนึ่งต่อไปนี้สำหรับพารามิเตอร์

• อาแจ็กซ์
• แท็ก
• ข้อมูล
• สอบถาม

ดังนั้นคุณต้องระบุหนึ่งใน 4 ตัวเลือกต่อไปนี้เพื่อเลือก 2 และควรใช้งานได้ตามที่คาดไว้

ฉันได้รับข้อผิดพลาดเดียวกัน ฉันใช้ select2-3.5.2

นี่คือรหัสของฉันซึ่งมีข้อผิดพลาด

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

ด้านล่างรหัสแก้ไขปัญหา

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

ฉันมี Web App ที่ซับซ้อนและไม่สามารถเข้าใจได้ว่าทำไมจึงเกิดข้อผิดพลาดนี้ มันทำให้ 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) {

}