jQuery select2 получить значение select tag?
привет друзья это мой код:
<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
.
Означает, что мне нужно значение select box, а не текст.
9 ответов
чтобы получить элемент Select, вы можете использовать $('#first').val();
чтобы получить текст выбранного значения -$('#first :selected').text();
можете ли вы опубликовать свой select2()
функции код
это решение позволяет забыть элемент select. Полезно, когда у вас нет идентификатора для select elements.
$("#first").select2()
.on("select2:select", function (e) {
var selected_element = $(e.currentTarget);
var select_val = selected_element.val();
});
Если вы используете ajax, вы можете сделать обновленное значение выбрать сразу после выбора.
//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)
});
Кредиты: Стивен Джонстон
посмотреть эта скрипка.
В принципе, вы хотите получить value
s вашего option
- теги, но вы всегда пытаетесь получить значение вашего select
-узел с $("#first").val()
.
поэтому мы должны выбрать опцию-теги и мы будем использовать селекторы jQuerys:
$("#first option").each(function() {
console.log($(this).val());
});
$("#first option")
выбирает каждый option
который является дочерним элементом элемента с идентификатором first
.
попробуйте это :
$('#input_id :selected').val(); //for getting value from selected option
$('#input_id :selected').text(); //for getting text from selected option
другие ответы не работает для меня, поэтому я разработал решение:
Я создал опцию С 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 property by simple :скрытый атрибут
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/