jQuery select2 получить значение тега select?

Привет друзья, это мой код:

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

Кредиты: Стивен-Джонстон

Это решение позволяет забыть о выбранном элементе. Полезно, когда у вас нет идентификатора для выбранных элементов.

$("#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

Посмотри на эту скрипку .
По сути, вы хотите получить values своих option-tags, но вы всегда пытаетесь получить значение вашего select-node с помощью $("#first").val().

Итак, мы должны выбрать теги опций, и мы будем использовать селекторы jQuerys:

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

$("#first option")выбирает каждый, optionкоторый является дочерним элементом элемента с идентификатором 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>

Затем для каждого выбранного параметра я добавил свойство display none

CSS:

option:checked {
   display: none;
}

Теперь мы можем добавить изменения в наш SelectBox, чтобы найти выбранную нами опцию со свойством display none с помощью атрибута simple : hidden.

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