JqGrid로 select2 드롭 다운의 선택된 값을 어떻게 변경합니까?

Oleg의 select2 데모를 사용 하고 있지만 드롭 다운 메뉴에서 현재 선택된 값을 변경할 수 있는지 궁금합니다.

예를 들어,로드 된 4 개의 값이 다음 "Any", "Fruit", "Vegetable", "Meat"과 같고 드롭 다운 목록이 기본값으로 설정된 경우 JqGrid 이벤트에서 어떻게 값 "Any"을 변경할 수 있습니까?"Fruit"loadComplete

이게 가능해?

select2 버전> = 4.0.0

다른 솔루션은 작동하지 않을 수 있지만 다음 예제는 작동합니다.

해결 방법 1 : select2를 포함하여 연결된 모든 변경 이벤트가 트리거되도록합니다.

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

해결 방법 2 : JUST select2 변경 이벤트가 트리거되도록합니다.

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

이에 대한 예제는 이 jsfiddle 을 참조하십시오 . 솔루션 2에 대한 @minlare에게 감사합니다.

설명:

가장 친한 친구가 사람들의 이름을 가지고 있다고 가정 해 봅시다. 따라서 Bob, Bill 및 John (이 예제에서는 Value가 이름과 같다고 가정합니다). 먼저 select에서 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 매개 변수가 포함되지 않습니다.

대신 기본 요소에서 .val을 직접 호출해야합니다. 두 번째 매개 변수 (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 내에서 원하는 값을 얻을 수 있으며 선택 상자 값을 설정할 수 있습니다.

문서에서 통지

이 메소드를 사용하려면 옵션에서 initSelection 함수를 정의해야합니다. 따라서 Select2는 val ()에 전달한 오브젝트의 id를 선택을 렌더링하는 데 필요한 전체 오브젝트로 변환하는 방법을 알고 있습니다. 선택 요소에 연결하는 경우이 기능이 이미 제공되어 있습니다.

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

도움이되어야합니다.

훨씬 쉬워야합니다.

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

그러나 전달한 값이 HTMl에 이미 있는지 확인하십시오.

new 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에서 선택한 문자열 옵션을 설정하는 데 문제가 있습니다.

"option string1 / option"옵션을 사용하면 :

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

옵션 값이 "E"인 string1 / option :

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

이것이 같은 문제로 어려움을 겪고있는 누군가를 돕기를 바랍니다.

단일 값을 선택하려면 $('#select').val(1).change()

여러 값을 선택하려면이 코드를 사용할 수 있도록 배열에서 값을 설정하십시오. $('#select').val([1,2,3]).change()

select2의 값과 드롭 다운의 텍스트 표현을 모두 변경하려는 경우 V4 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();

아약스 데이터 소스가 있다면 무료 버그를 참조하십시오.

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