사용 시 select2에서 선택한 텍스트를 얻는 방법사용 시 select2에서 선택한 텍스트를 얻는 방법

사용 시 select2에서 선택한 텍스트를 얻는 방법

select2 컨트롤을 사용하여 Ajax를 통해 데이터를 로드하고 있습니다.이를 위해서는<input type=hidden..>태그를 붙입니다.

이제 선택한 텍스트를 검색합니다.(the.value의 재산data-bind표현은 을 나타낸다.id한정)

난 시도했다.$(".select2-chosen").text()단, 페이지에 select2 컨트롤이 여러 개 있는 경우 이 컨트롤이 파손됩니다.

Select2 4.x에서는 멀티 셀렉트리스트가 아닌 경우에도 항상 어레이를 반환합니다.

var data = $('your-original-element').select2('data')
alert(data[0].text);
alert(data[0].id);

Select2 3.x 이하의 경우

단일 선택:

var data = $('your-original-element').select2('data');
if(data) {
  alert(data.text);
}

선택하지 않은 경우 변수 'data'는 null이 됩니다.

다중 선택:

var data = $('your-original-element').select2('data')
alert(data[0].text);
alert(data[0].id);
alert(data[1].text);
alert(data[1].id);

3.x 문서에서:

data 선택을 가져오거나 설정합니다.val 메서드와 유사하지만 ID 대신 개체와 함께 작동합니다.

값이 설정되지 않은 단일 선택에서 호출된 데이터 메서드는 null을 반환하고 빈 다중 선택에서 호출된 데이터 메서드는 []를 반환합니다.

표시 텍스트에 사용

var data = $('#id-selected-input').select2('data'); 
data.forEach(function (item) { 
    alert(item.text); 
})

이렇게 해서 겨우 알아냈어

var $your-original-element = $('.your-original-element');
var data = $your-original-element.select2('data')[0]['text'];
alert(data);

값을 원하는 경우:

var value = $your-original-element.select2('data')[0]['id'];
alert(value);

Select2 버전4에서는 각 옵션은 목록 내 객체의 속성이 동일합니다.

목적이 있다면

Obj = {
  name: "Alberas",
  description: "developer",
  birthDate: "01/01/1990"
}

그런 다음 선택한 데이터를 가져옵니다.

var data = $('#id-selected-input').select2('data');
console.log(data[0].name);
console.log(data[0].description);
console.log(data[0].birthDate);
 

v4에서 올바른 방법은 다음과 같습니다.

$('.select2-chosen').select2('data')[0].text

문서화되어 있지 않기 때문에 앞으로 경고 없이 파손될 수 있습니다.

먼저 선택사항이 있는지 확인하는 것이 좋습니다.

var s = $('.select2-chosen');

if(s.select2('data') && !!s.select2('data')[0]){
    //do work
}

아래 코드는 다른 방법으로도 해결됩니다.

.on("change", function(e) {

  var lastValue = e.currentTarget.value;
  var lastText = e.currentTarget.textContent;

 });

또한 다음 코드를 사용하여 선택한 값을 얻을 수 있습니다.

alert("Selected option value is: "+$('#SelectelementId').select2("val"));

다시 한 번 심플하고 쉬운 것을 제안합니다.

사용자가 검색 및 선택할 때 Ajax와 함께 완벽하게 작동하여 선택한 정보를 Ajax를 통해 저장합니다.

 $("#vendor-brands").select2({
   ajax: {
   url:site_url('general/get_brand_ajax_json'),
  dataType: 'json',
  delay: 250,
  data: function (params) {
  return {
    q: params.term, // search term
    page: params.page
  };
},
processResults: function (data, params) {
  // parse the results into the format expected by Select2
  // since we are using custom formatting functions we do not need to
  // alter the remote JSON data, except to indicate that infinite
  // scrolling can be used
  params.page = params.page || 1;

  return {
    results: data,
    pagination: {
      more: (params.page * 30) < data.total_count
    }
  };
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom    formatter work
minimumInputLength: 1,
}).on("change", function(e) {


  var lastValue = $("#vendor-brands option:last-child").val();
  var lastText = $("#vendor-brands option:last-child").text();

  alert(lastValue+' '+lastText);
 });

이것은 V 4.0.3을 사용하여 정상적으로 동작하고 있습니다.

var vv = $('.mySelect2');     
var label = $(vv).children("option[value='"+$(vv).select2("val")+"']").first().html();
console.log(label); 

버전 2.4 선택

제가 요구한 작업 시나리오는 두 가지가 있으며, 이것이 저에게 맞는 작업 시나리오입니다.

let val, 
dom = '#your_selector_id';

val = $(dom+' option:selected').text();
console.log('Initial text is '+val); 

$(document).on('change', () => {
  val = $(dom).select2('data').text;    
  console.log('Selected text is '+val);
});

브라우저 콘솔에서 디버깅 인쇄를 확인합니다.

언급URL : https://stackoverflow.com/questions/19814601/how-to-get-selected-text-from-select2-when-using-input