Работа с select элементами с помощью jQuery

jQuery + select = любовь

	
		<select id="select1" name="select1">
		<option disabled="disabled">Выберите пункт</option>
		<option value="s1">Пункт 1</option>
		<option value="s2">Пункт 2</option>
		<option value="s3">Пункт 3</option>
		</select>
	

С помощью библиотеки jQuery можно достаточно просто работать с select-ами. Ниже приведены примеры обработки селектов с помощью этой библиотеки. Все примеры основаны на вот этой html разметке:

Получение значения выбранного пункта select-а

Получим значение выбранного пункта (value):

	
		$('#select1 option:selected').val();
	

Для получения текста выбранного пункта можно использовать функцию text()

	
		$('#select1 option:selected').text();
	

Снятие/установка значения пункта селект

Очистить выбранное значение селекта:

	
		$('#select1 option').removeAttr('selected');
	

Установить значение селекта:

	
		$('#select1 option[value=4]').attr('selected', 'selected');
	

PS. Здесь мы установили для селекта выбранным пункт со значением , а вообще селектор можно составить кучей различных способов. Например выберем в селекте последний пункт или первый, или десятый:

	
		$('#select1 option:last').attr('selected', 'selected'); // Последний
		$('#select1 option:first').attr('selected', 'selected'); // Первый
		$('#select option:nth-of-type(10)').attr('selected', 'selected'); // Десятый