Главная / JavaScript / Плагины / Select 2 / Устанавливаем выбранное значение

Устанавливаем выбранное значение

Если это надо сделать при запуске плагина, то самый простой способ - в самом теге <select> задать значение по умолчанию с помощью атрибута selected='selected'.

Если надо установить значение Select2 динамически с помощью кода, то можно сделать так.

Вариант 1

Скопировано

jQuery( 'select' ).select2( 'val', '555' );

Показать код

Для использования этого метода у каждой опции внутри тега <select> должно быть задано значение с помощью атрибута value, которое и надо подставить вместо 555.

Пример:

htmlРезультат

Скопировано

<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>

<select>
	<option></option>
	<option value='1'>Первое значение</option>
	<option value='2'>Второе значение</option>
	<option value='3'>Третье значение</option>
</select>
<button style='margin-left: 40px;'>установить значение 2</button>

<script>
	jQuery( 'select' ).select2({
		placeholder: 'Выберите значение',
		// параметры ниже для красоты
		allowClear: true,
		width: 'auto',
		minimumResultsForSearch: Infinity
	});
	jQuery(document).on('click', 'button', function() {
		jQuery( 'select' ).select2( 'val', '2' );
	});
</script>

Показать код

Вариант 2

Скопировано

jQuery( 'select' ).val( '555' ).trigger( 'change' );

Показать код

В этом случае вместо 555 можно указать как текст нужной опции (но только, если в опциях не задан атрибут value), так и ее значение (то есть то, что написано у нее в атрибуте value).

Пример:

htmlРезультат

Скопировано

<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>

<select>
	<option></option>
	<option>Первое значение</option>
	<option>Второе значение</option>
	<option>Третье значение</option>
</select>
<button style='margin-left: 40px;'>установить значение 3</button>

<script>
	jQuery( 'select' ).select2({
		placeholder: 'Выберите значение',
		// параметры ниже для красоты
		allowClear: true,
		width: 'auto',
		minimumResultsForSearch: Infinity
	});
	jQuery(document).on('click', 'button', function() {
		jQuery( 'select' ).val( 'Третье значение' ).trigger( 'change' );
	});
</script>

Показать код

Как установить несколько значений для мультиселекта смотрим здесь.