jQuery select2 선택 태그의 값을 얻습니까?

안녕 친구 이것은 내 코드입니다.

<select id='first'>
  <option value='1'> First  </option>
  <option value='2'> Second </option>
  <option value='3'> Three  </option>
</select>

이것은 내 select2 코드입니다.

$("#first").select2();

아래는 선택된 값을 얻기위한 코드입니다.

$("#first").select2('val'); // It returns first,second,three.

이것은 같은 텍스트를 반환 first,second,three하고 나는 얻고 싶습니다 1,2,3.
텍스트가 아닌 선택 상자의 값이 필요함을 의미합니다.

$("#first").val(); // this will give you value of selected element. i.e. 1,2,3.

Select 요소를 얻으려면 사용할 수 있습니다. $('#first').val();

선택한 값의 텍스트를 얻으려면- $('#first :selected').text();

select2()기능 코드 를 게시 해 주시겠습니까?

$("#first").select2('data') 모든 데이터를지도로 반환합니다.

ajax를 사용하는 경우 선택 직후 select 값 을 업데이트 할 수 있습니다 .

//Part 1

$(".element").select2(/*Your code*/)    

//Part 2 - continued 

$(".element").on("select2:select", function (e) { 
  var select_val = $(e.currentTarget).val();
  console.log(select_val)
});

크레딧 : Steven-Johnston

이 솔루션을 사용하면 선택 요소를 잊을 수 있습니다. 선택한 요소에 ID가 없을 때 유용합니다.

$("#first").select2()
.on("select2:select", function (e) {
    var selected_element = $(e.currentTarget);
    var select_val = selected_element.val();
});

간단한 대답은 다음과 같습니다.

$('#first').select2().val()

이 방법으로도 작성할 수 있습니다.

 $('#first').val()

이 시도 :

$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option

이 바이올린을 참조하십시오 .
기본적으로 -tag 의 values 를 얻고 option싶지만 항상 select-node 의 값을 얻으려고 노력합니다.$("#first").val() .

그래서 우리는 옵션 태그를 선택해야하고 jQuerys 선택기를 활용할 것입니다 :

$("#first option").each(function() {
    console.log($(this).val());
});

$("#first option")optionid를 가진 요소의 자식 인 모든 항목 을 선택합니다 first.

위의 솔루션은 최신 select2 (4.0.13)에서 작동하지 않았습니다.

jQuery를 사용하면이 솔루션을 사용하여 문서에 따라 값을 검색 할 수 있습니다. https://select2.org/programmatic-control/retrieving-selections

$('#first').find(':selected').val();

다른 답변이 저에게 효과가 없었기 때문에 솔루션을 개발했습니다.

class = "option-item" 옵션을 만들었습니다.쉬운 타겟팅을 위해

HTML :

<select id="select-test">
<option value="5-val" id="first-id" class="option-item"> First option </option>
</select>

그런 다음 선택한 모든 옵션에 대해 아무것도 표시하지 않습니다. 특성

CSS :

option:checked {
   display: none;
}

이제 SelectBox에 변경 사항 을 추가 하여 display none 속성으로 선택한 옵션을 찾을 수 있습니다. 속성

JQuery :

$('#select-test').change(function(){
//value 
    $('#select-test').find('.option-item:hidden').val();
//id
    $('#select-test').find('.option-item:hidden').attr('id');
//text
    $('#select-test').find('.option-item:hidden').text();
});

작업 바이올린 : https://jsfiddle.net/Friiz/2dk4003j/10/

해결책 :

var my_veriable = $('#your_select2_id').select2().val();
var my_last_veriable = my_veriable.toString();