Select field (drop-down) is used to create a drop-down list, can be used in a form to collect user input.
Table of Contents
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());
});