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());
});

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close