Làm cách nào để thay đổi giá trị được chọn của thả xuống select2 bằng JqGrid?

Tôi đang sử dụng bản demo select2 của Oleg , nhưng tôi tự hỏi liệu có thể thay đổi giá trị hiện được chọn trong menu thả xuống hay không.

Ví dụ: nếu bốn giá trị được tải là: "Any", "Fruit", "Vegetable", "Meat"và danh sách thả xuống được mặc định "Any", làm thế nào tôi có thể thay đổi giá trị đó thành "Fruit"trong sự kiện JqGrid loadComplete?

Điều này có thể không?

Đối với phiên bản select2> = 4.0.0

Các giải pháp khác có thể không hoạt động, tuy nhiên các ví dụ sau sẽ hoạt động.

Giải pháp 1: Làm cho tất cả các sự kiện thay đổi được đính kèm kích hoạt, bao gồm select2

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

Giải pháp 2: Gây ra sự kiện thay đổi JUST select2 để kích hoạt

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

Xem jsfiddle này cho ví dụ về những điều này. Cảm ơn @minlare cho Giải pháp 2.

Giải trình:

Nói rằng tôi có một người bạn tốt nhất chọn tên của mọi người. Vì vậy, Bob, Bill và John (trong ví dụ này tôi cho rằng Giá trị giống như tên). Đầu tiên tôi khởi tạo select2 trên phần chọn của mình:

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

Bây giờ tôi tự chọn Bob trong trình duyệt. Tiếp theo Bob làm điều gì đó nghịch ngợm và tôi không thích anh ta nữa. Vì vậy, hệ thống bỏ chọn Bob cho tôi:

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

Hoặc nói rằng tôi làm cho hệ thống chọn tiếp theo trong danh sách thay vì Bob:

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

Ghi chú trên trang web Chọn 2 (xem Phương pháp không dùng nữa và đã xóa ) có thể hữu ích cho người khác:

.select2 ('val') Phương thức "val" đã không được chấp nhận và sẽ bị xóa trong Chọn2 4.1. Phương thức không dùng nữa không bao gồm tham số triggerChange.

Bạn nên gọi trực tiếp .val trên phần tử cơ bản thay thế. Nếu bạn cần tham số thứ hai (triggerChange), bạn cũng nên gọi .trigger ("thay đổi") trên phần tử.

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

Nhìn vào các tài liệu select2 bạn sử dụng dưới đây để nhận / đặt giá trị.

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

@PanPipes đã chỉ ra rằng điều này đã thay đổi trong 4.x (hãy ném cho anh ta một upvote bên dưới). valbây giờ được gọi trực tiếp

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

Vì vậy, trong phạm vi loadCompletecủa jqGrid, bạn có thể nhận được bất kỳ giá trị nào bạn đang tìm kiếm sau đó đặt giá trị hộp chọn.

Thông báo từ các tài liệu

Lưu ý rằng để sử dụng phương thức này, bạn phải xác định hàm initSelection trong các tùy chọn để Chọn2 biết cách chuyển đổi id của đối tượng bạn truyền trong val () sang đối tượng đầy đủ mà nó cần để hiển thị lựa chọn. Nếu bạn đang gắn vào một phần tử chọn, chức năng này đã được cung cấp cho bạn.

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

điều này nên được giúp đỡ

Điều này sẽ còn dễ dàng hơn nữa.

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

Nhưng hãy chắc chắn rằng các giá trị mà bạn vượt qua đã có trong HTMl

Nếu bạn muốn thêm mới value='newValue'và text='newLabel', bạn nên thêm mã này:

1. Thêm tùy chọn mới vào <select>:

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

2. <select>Thay đổi kích hoạt thành giá trị được chọn:

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

Chỉ muốn thêm một câu trả lời thứ hai. Nếu bạn đã kết xuất lựa chọn dưới dạng select2 , bạn sẽ cần phải có phản hồi đó trong bộ chọn của mình như sau:

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

Bạn có hai tùy chọn - như @PanPipes trả lời trạng thái bạn có thể làm như sau.

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

Đây chỉ là một giải pháp có thể chấp nhận nếu một người không có bất kỳ hành động tùy chỉnh nào bị ràng buộc với sự kiện thay đổi. Giải pháp tôi sử dụng trong tình huống này là kích hoạt một sự kiện cụ thể select2 cập nhật lựa chọn hiển thị select2.

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

Gặp một số rắc rối với việc đặt tùy chọn Chuỗi được chọn trong select2:

Với tùy chọn: "tùy chọn chuỗi1 / tùy chọn" được sử dụng:

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

NHƯNG với một tùy chọn có giá trị: tùy chọn giá trị "E" chuỗi1 / tùy chọn:

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

Hy vọng điều này sẽ giúp ai đó đấu tranh với cùng một vấn đề.

nếu bạn muốn chọn một giá trị duy nhất thì hãy sử dụng $('#select').val(1).change()

nếu bạn muốn chọn nhiều giá trị thì đặt giá trị trong mảng để bạn có thể sử dụng mã này $('#select').val([1,2,3]).change()

Đối với V4 Select2 nếu bạn muốn thay đổi cả giá trị của select2 và biểu diễn văn bản của trình đơn thả xuống.

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

Điều này sẽ đặt không chỉ giá trị đằng sau hậu trường mà còn hiển thị văn bản cho select2.

Được kéo từ https://select2.github.io/announcements-4.0.html#remond-methods

Mã dự kiến ​​của tôi:

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

hoạt động hoàn hảo cảm ơn @PanPipes cho người hữu ích.

làm cái này

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

Nếu bạn có nguồn dữ liệu ajax, vui lòng tham khảo phần này để biết lỗi miễn phí

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

// Thiết lập điều khiển Chọn2

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

// Lấy mục đã chọn và thêm vào điều khiển

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
        }
    });
});

nếu bạn muốn đặt một mục được chọn khi bạn biết văn bản từ danh sách thả xuống và không biết giá trị, đây là một ví dụ:

Giả sử bạn đã tìm ra múi giờ và muốn đặt nó, nhưng các giá trị có time_zone_idtrong đó.

        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
        }
    });
});

Phông chữ: Chọn 2 tài liệu

bạn chỉ có thể sử dụng phương thức get / set để đặt giá trị

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

hoặc bạn có thể làm điều này:

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