Select Tutorial

Step 1

The most basic select.

We use the <select> element.

Output

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.

Output

Step 3

Let's attach a value to our option.

We do this with the value attribute.

Output

Step 4

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

We do this with text inside the option tags.

Output

Step 5

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

Output

Step 6

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

Output

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.

Output

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() {
  $('.select2-value').text($('select[name="select2"]').val());
});

Output

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