jQuery select2 obtém o valor da tag select?

Olá amigos, este é o meu código:

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

Este é o meu código select2:

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

Abaixo está o código para obter o valor selecionado.

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

Este é o retorno de um texto como first,second,threee desejo obter 1,2,3.
Significa que preciso do valor da caixa de seleção, não do texto.

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

Para obter o elemento Select, você pode usar $('#first').val();

Para obter o texto do valor selecionado - $('#first :selected').text();

Você pode postar seu select2()código de função

$("#first").select2('data') retornará todos os dados como mapa

Se você estiver usando ajax , pode desejar obter o valor atualizado de select logo após a seleção.

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

Créditos: Steven-Johnston

Esta solução permite que você esqueça o elemento selecionado. Útil quando você não tem uma identificação em elementos selecionados.

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

A resposta simples é:

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

e você também pode escrever desta forma:

 $('#first').val()

Experimente isto:

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

Veja este violino .
Basicamente, você deseja obter os values de suas option-tags, mas sempre tenta obter o valor de seu select-node com $("#first").val().

Portanto, temos que selecionar as tags de opção e utilizaremos os seletores jQuerys:

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

$("#first option")seleciona todos os optionque são filhos do elemento com o id first.

As soluções acima não funcionaram para mim com o último select2 (4.0.13)

Com jQuery você pode usar esta solução para recuperar o valor de acordo com a documentação: https://select2.org/programmatic-control/retrieving-selections

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

Outras respostas não estavam funcionando para mim, então desenvolvi a solução:

Eu criei a opção com class = "option-item" para facilitar o direcionamento

HTML:

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

Então, para cada opção selecionada eu adicionei nenhuma propriedade de exibição

CSS:

option:checked {
   display: none;
}

Agora podemos adicionar alterações ao nosso SelectBox para encontrar nossa opção selecionada com a propriedade display none por simples : atributo oculto

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

Trabalhando violino: https://jsfiddle.net/Friiz/2dk4003j/10/

Solução:

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