Select Tutorial

Step 1

The most basic select.

We use the <select> element.


Step 2

Let's add our first option.

We do this with the <option> element.

We can select this option… but it's blank, and not very useful.


Step 3

Let's attach a value to our option.

We do this with the value attribute.


Step 4

Let's make the value of our option actually visible.

We do this with text inside the option tags.


Step 5

Let's add 2 more options to our select element.


Step 6

We can choose which option is 'pre-selected' with the selected attribute.


Step 7

Let's associate our options with our select element.

We do this with the name attribute

We'll need this when we retrieve the selected option.


Step 8

Now let's retrieve the value of the selected option!

We do this by targeting the name attribute of our select element.

This will retrieve the (one) chosen value from our group of options.

$('.btn--select2').on('click', function() {


Value of chosen select2 option:

NB. We could give our select element an id and target that in our retrieval, but it's more semantic to target the name attribute.

NB. We could use the :selected selector (the below code would produce the same result), but it's not necessary.

$('select[name=select2] option:selected').val()