jQuery Select Field Tutorials

Select field (drop-down) is used to create a drop-down list, can be used in a form to collect user input.

Best Plugins for Dropdown

• Select2 – Select2 is the most popular jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.
• FancySelect – Make the drop-down more fancy.
• Chosen – This jQuery plugin makes long, unwieldy select boxes much more user-friendly.

Get value of select on change event

<select class="list">
	<option value="football">Football</option>
	<option value="soccer">Soccer</option>
	<option value="swimming">Swimming</option>
</select>

$('.list').on('change', function() {
	alert( this.value );
});

Set a value for drop-down

$('.list option:eq(1)').prop('selected', true);
$('.list option:eq(2)').attr('selected', 'selected');
$('.list option[value="swimming"]').prop('selected', true);
$('.list').val('soccer');

Get the text value of a selected option

Using text() method can retrieve text value of an element.

$(".list option:selected").text();

Loop through each option of select field

jQuery('.list option').each(function(){
	console.log(jQuery(this).val());
});