jQuery select2 отримати значення тегу select?


95

Привіт друзі, це мій код:

<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.
Означає, що мені потрібно значення поля вибору, а не тексту.


Чи можете ви надати JSFiddle? Це було б дуже корисно.
Ionică Bizău

1
питання незрозуміле. що саме ти хочеш?
Хірал

Відповіді:


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

5
$ ("# перший"). val (); // повертає 1,2,3 АБО $ ("# first"). select2 ('val'); // повертається першим, другим, трьом
Реніш Хунт

$ ("# перший"). val (); поверне 1,2,3 (що коли-небудь вибрано), і ви можете опублікувати код у функції select2 () для отримання додаткової інформації.
somesh

для вибору, названого іменем id замість імені класу, використовуйте: $ (". first"). val ()
Rui Martins

@RuiMartins неправильно. Ідентифікатори називаються "#", а класи - ".", Тож для виклику за ідентифікатором ви б використовували $ ("# перший"). Val (), а для CLASS ви б використовували $ (". First") ) .val ()
Джерело має значення

58

Щоб отримати елемент Select, який ви можете використовувати $('#first').val();

Щоб отримати текст вибраного значення - $('#first :selected').text();

Чи можете ви опублікувати свій select2()код функції


1
$ ("# перший"). val (); // повертає 1,2,3 АБО $ ("# first"). select2 ('val'); // повертається першим, другим, трьом
Реніш Хунт

Не впевнений, я зрозумів ваше запитання.
Krish R

1
коли я використовував плагін select2, тоді я отримую значення за допомогою $ ("# first"). val (). не повертає нічого, повертає порожнім
Реніш Хунт,

Чи можете ви надати скрипт-приклад своїм плагіном?
Krish R

1
Мені довелося скористатися $('#first :selected').text();іншим варіантом повернення всіх можливих варіантів.
Джефф Bluemel

35

$("#first").select2('data') поверне всі дані як карту


1
Дуже корисно, якщо у вас є додаткові властивості щодо об’єктів select2
взуття

9

Якщо ви використовуєте 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)
});

Подяки: Стівен-Джонстон


Привіт, я можу знати, звідки це currentTargetбереться? жоден із прикладів вашого ідентифікатора / імені не пов’язаний із запитанням. Тож я не можу ніде стосуватися.
masteruse

8

Це рішення дозволяє забути виділений елемент. Корисно, коли у вас немає ідентифікатора вибраних елементів.

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

4

Проста відповідь:

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

і ви також можете писати цим способом:

 $('#first').val()

3

Спробуйте це :

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

@RenishKhunt відповіді тут не лише для вас (людина, яка задає питання), але й для інших людей, які бачать цю сторінку. І чим більше тут подано різних рішень, тим кращий вибір мають усі інші, знову ж таки: не тільки ви :)
infografnet

Так, мені шкода. Дякую, @infografnet і велике спасибі Фахмі Іманудін за розміщення відповіді :)
Реніш Хунт

2

Дивіться цю загадку .
В основному, ви хочете отримати values ваших option-tags, але ви завжди намагаєтесь отримати значення вашого select-node за допомогою $("#first").val().

Тому ми повинні вибрати теги опцій, і ми будемо використовувати селектори jQuerys:

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

$("#first option")вибирає кожен, optionякий є дочірнім елементом з ідентифікатором first.


$ ("# перший"). val (); // повертає 1,2,3 АБО $ ("# first"). select2 ('val'); // повертається першим, другим, трьом
Реніш Хунт

Здається, я неправильно зрозумів ваше запитання, тоді, будь ласка, чітко поясніть, чого ви хочете досягти.
KeyNone

коли я використовував плагін select2, тоді я отримую значення за допомогою $ ("# first"). val (). не повертає нічого, повертає порожнім
Renish Khunt

Дивіться цю загадку . Для мене чудово працює. (Я додав select2.js під зовнішніми ресурсами, хоча я не можу сказати, чому поля виглядають некрасиво).
KeyNone

ключовим було те, що ви сказали, що ми хочемо отримати значення тегів опцій!
Дарій. V


0

Інші відповіді не працювали для мене, тому я розробив рішення:

Я створив опцію з 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 за допомогою атрибута 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/


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.