ฉันจะเปลี่ยนค่าที่เลือกของดร็อปดาวน์ select2 ด้วย JqGrid ได้อย่างไร

ฉันกำลังใช้การสาธิต select2ของ Oleg แต่ฉันสงสัยว่ามันจะเป็นไปได้ไหมที่จะเปลี่ยนค่าที่เลือกไว้ในเมนูดรอปดาวน์

ตัวอย่างเช่นหากโหลดทั้งสี่ค่าคือ: "Any", "Fruit", "Vegetable", "Meat"และรายการแบบเลื่อนลง"Any"เป็นค่าเริ่มต้นเป็นฉันจะสามารถเปลี่ยนสิ่งนั้น"Fruit"เป็นเหตุการณ์ JqGrid ได้loadCompleteอย่างไร

เป็นไปได้ไหม

สำหรับ select2 version> = 4.0.0

โซลูชันอื่นอาจไม่ทำงานอย่างไรก็ตามตัวอย่างต่อไปนี้ควรใช้งานได้

โซลูชันที่ 1: ทำให้เหตุการณ์การเปลี่ยนแปลงที่แนบทั้งหมดเพื่อทริกเกอร์รวมทั้ง select2

$('select').val('1').trigger('change');

โซลูชันที่ 2: ทำให้ JUST select2 เปลี่ยนเหตุการณ์เพื่อทริกเกอร์

$('select').val('1').trigger('change.select2');

ดูjsfiddleนี้สำหรับตัวอย่างของสิ่งเหล่านี้ ขอบคุณ @minlare สำหรับโซลูชัน 2

คำอธิบาย:

ว่าฉันมีเพื่อนที่ดีที่สุดที่มีชื่อของผู้คนเลือก ดังนั้นบ็อบบิลและจอห์น (ในตัวอย่างนี้ฉันถือว่าค่าเหมือนกันกับชื่อ) ครั้งแรกที่ฉันเริ่มต้น select2 ที่เลือกของฉัน:

$('#my-best-friend').select2();

ตอนนี้ฉันเลือก Bob ในเบราว์เซอร์ด้วยตนเอง ถัดไปบ๊อบทำอะไรที่ซุกซนและฉันไม่ชอบเขาอีกต่อไป ดังนั้นระบบจะยกเลิกการเลือก Bob สำหรับฉัน:

$('#my-best-friend').val('').trigger('change');

หรือว่าฉันทำให้ระบบเลือกถัดไปในรายการแทน Bob:

// I have assume you can write code to select the next guy in the list
$('#my-best-friend').val('Bill').trigger('change');  

หมายเหตุเกี่ยวกับเว็บไซต์ Select 2 (ดูวิธีเลิกและลบออก ) ที่อาจเป็นประโยชน์ต่อผู้อื่น:

.select2 ('val') วิธีการ "val" ถูกเลิกใช้แล้วและจะถูกลบใน Select2 4.1 วิธีที่เลิกใช้ไม่รวมพารามิเตอร์ triggerChange อีกต่อไป

คุณควรเรียก. วาลในองค์ประกอบพื้นฐานโดยตรงแทน หากคุณต้องการพารามิเตอร์ตัวที่สอง (triggerChange) คุณควรเรียก. trigger ("change") บนองค์ประกอบ

$('select').val('1').trigger('change'); // instead of $('select').select2('val', '1');

ดูเอกสาร select2 ที่คุณใช้ด้านล่างเพื่อรับ / ตั้งค่า

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

@PanPipes ได้ชี้ให้เห็นว่าสิ่งนี้มีการเปลี่ยนแปลงสำหรับ 4.x (ไปโยนเขาขึ้นโหวตด้านล่าง) valถูกเรียกตอนนี้โดยตรง

$("#select").val("CA");

ดังนั้นภายในloadCompletejqGrid คุณสามารถรับค่าอะไรก็ตามที่คุณต้องการแล้วตั้งค่า selectbox

สังเกตจากเอกสาร

โปรดสังเกตว่าในการใช้วิธีนี้คุณต้องกำหนดฟังก์ชัน initSelection ในตัวเลือกเพื่อให้ Select2 รู้วิธีเปลี่ยน id ของวัตถุที่คุณส่งผ่านใน val () ไปเป็นวัตถุเต็มรูปแบบที่จำเป็นต้องใช้ในการเลือกการแสดงผล หากคุณกำลังแนบองค์ประกอบที่เลือกฟังก์ชั่นนี้มีให้สำหรับคุณแล้ว

this.$("#yourSelector").select2("data", { id: 1, text: "Some Text" });

สิ่งนี้น่าจะช่วยได้

ควรจะง่ายกว่านี้อีก

$("#e1").select2("val", ["View" ,"Modify"]);

แต่ให้แน่ใจว่าค่าที่คุณส่งผ่านมีอยู่แล้วใน HTMl

หากคุณต้องการเพิ่มใหม่value='newValue'และtext='newLabel'คุณควรเพิ่มรหัสนี้:

1. เพิ่มตัวเลือกใหม่ไปที่<select>:

   var opt = "<option value='newValue' selected ='selected'>" + newLabel+ " </option>";
   $(selLocationID).html(opt);

2. ทริกเกอร์<select>เปลี่ยนเป็นค่าที่เลือก:

   $(selLocationID).val('newValue').trigger("change");

แค่อยากจะเพิ่มคำตอบที่สอง หากคุณได้ทำการเลือกเป็น select2แล้วคุณจะต้องแสดงสิ่งที่เลือกในตัวเลือกดังนี้:

$("#s2id_originalSelectId").select2("val", "value to select");

คุณมีสองตัวเลือก - ตามที่ @PanPipes ตอบว่าคุณสามารถทำสิ่งต่อไปนี้ได้

$(element).val(val).trigger('change');

นี่เป็นวิธีการแก้ปัญหาที่ยอมรับได้หากไม่มีการกระทำที่กำหนดเองใด ๆ ที่ผูกไว้กับเหตุการณ์การเปลี่ยนแปลง วิธีแก้ปัญหาที่ฉันใช้ในสถานการณ์นี้คือการทริกเกอร์เหตุการณ์ select2 เฉพาะซึ่งอัพเดตการเลือก select2 ที่แสดง

$(element).val(val).trigger('change.select2');

มีปัญหาบางอย่างกับการตั้งค่าตัวเลือกสตริงที่เลือกใน select2:

ด้วยตัวเลือก: "ตัวเลือก string1 / ตัวเลือก" ใช้:

$('#select').val("string1").change(); 

แต่มีตัวเลือกที่มีค่า: ตัวเลือกค่า "E" string1 / ตัวเลือก:

$('#select').val("E").change(); // you must enter the Value instead of the string

ความหวังนี้จะช่วยให้บางคนประสบปัญหาเดียวกัน

หากคุณต้องการเลือกค่าเดียวให้ใช้ $('#select').val(1).change()

หากคุณต้องการเลือกหลายค่าจากนั้นตั้งค่าในอาร์เรย์เพื่อให้คุณสามารถใช้รหัสนี้ $('#select').val([1,2,3]).change()

สำหรับ V4 Select2 หากคุณต้องการเปลี่ยนทั้งค่าของ select2 และการแทนข้อความของดรอปดาวน์

var intValueOfFruit = 1;
var selectOption = new Option("Fruit", intValueOfFruit, true, true);
$('#select').append(selectOption).trigger('change');

สิ่งนี้จะตั้งค่าไม่เพียง แต่ค่าที่อยู่เบื้องหลังเท่านั้น แต่ยังแสดงข้อความสำหรับ select2 ด้วย

ดึงจากhttps://select2.github.io/announcements-4.0.html#removed-methods

รหัสที่ฉันคาดหวัง:

$('#my-select').val('').change();

ทำงานได้อย่างสมบูรณ์แบบด้วย @PanPipes สำหรับผู้ใช้ที่มีประโยชน์

ทำเช่นนี้

 $('select#id').val(selectYear).select2();

หากคุณมีแหล่งข้อมูล ajax โปรดอ้างอิงสิ่งนี้เพื่อหาข้อบกพร่องฟรี

https://select2.org/programmatic-control/add-select-clear-items

// ตั้งค่าตัวควบคุม Select2

$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// ดึงรายการที่เลือกไว้ล่วงหน้าและเพิ่มลงในส่วนควบคุม

var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

หากคุณต้องการตั้งค่ารายการที่เลือกเมื่อคุณทราบข้อความจากรายการแบบหล่นลงและไม่ทราบค่านี่คือตัวอย่าง:

สมมติว่าคุณหาเขตเวลาและต้องการตั้งค่า แต่มีค่าtime_zone_idอยู่ในเขตนั้น

        var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
        var $select2 = $('#time-zone');
        var selected = $select2.find("option:contains('"+timeZone+"')").val();
        $select2.val(selected).trigger('change.select2'); 

// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

แบบอักษร: เลือก 2 เอกสาร

คุณสามารถใช้วิธีการ get / set เพื่อกำหนดค่า

$("#select").select2("val"); //get the value
$("#select").select2("val", "CA"); //set the value

หรือคุณสามารถทำสิ่งนี้:

$('#select').val("E").change(); // you must enter the Value instead of the string