WEBVTT

00:00:06.650 --> 00:00:13.740
In this video we're going to learn how to use the day to create select menus.

00:00:13.740 --> 00:00:23.760
So it creates a simple select menu using the select tag inside our first day.

00:00:24.120 --> 00:00:25.870
So we're going to give it an ID.

00:00:26.640 --> 00:00:28.200
OK.

00:00:28.680 --> 00:00:35.130
So let's call it strength because we're going to be looking at some personal qualities or personal sense

00:00:35.130 --> 00:00:35.790
.

00:00:35.850 --> 00:00:43.700
So and also we're going to have a label before so labor force trends.

00:00:43.810 --> 00:00:45.530
Let's put some text.

00:00:45.730 --> 00:00:52.770
So for example select your biggest strength

00:00:54.980 --> 00:00:57.340
.

00:00:58.060 --> 00:00:58.960
OK.

00:00:59.890 --> 00:01:02.300
OK let's have a list of options.

00:01:03.000 --> 00:01:06.970
Inside the select tag.

00:01:09.120 --> 00:01:12.660
OK so first one motivation

00:01:17.670 --> 00:01:19.650
and creativity

00:01:24.180 --> 00:01:25.070
curiosity.

00:01:25.110 --> 00:01:25.620
For example

00:01:29.810 --> 00:01:31.630
integrity.

00:01:32.100 --> 00:01:38.430
These are really important qualities and modesty.

00:01:39.270 --> 00:01:44.760
OK let's choose.

00:01:45.390 --> 00:01:47.650
Creativity is ours.

00:01:48.030 --> 00:01:48.690
Selected

00:01:55.980 --> 00:01:57.230
one.

00:01:57.720 --> 00:02:07.140
OK we can add a name as well as index menus.

00:02:07.490 --> 00:02:10.010
It's given the strength as well.

00:02:10.680 --> 00:02:22.430
OK so now let's go for the piece of code we need to style this select menu using the query.

00:02:23.190 --> 00:02:30.830
OK before we do this or a line break just before the select menu.

00:02:32.190 --> 00:02:33.160
That looks better.

00:02:33.440 --> 00:02:41.360
Ok now we got to select the select menu using its ID so the ID is strength.

00:02:42.840 --> 00:02:43.450
OK.

00:02:43.680 --> 00:02:46.710
And then

00:02:49.500 --> 00:02:53.820
when you use the method select menu

00:03:01.290 --> 00:03:07.780
you can see that we've got our drop down menu styled using the J.

00:03:07.800 --> 00:03:23.090
We can change the width of the menu just by is going go to style section.

00:03:25.800 --> 00:03:30.550
They said there with two 200 pixels of

00:03:33.730 --> 00:03:36.160
that expense.

00:03:36.890 --> 00:03:38.040
OK.

00:03:38.760 --> 00:03:44.520
Now we're going to create another Silex menu inside the second Dave and this time we'd like to have

00:03:45.870 --> 00:03:47.560
groups of qualities.

00:03:47.580 --> 00:03:55.710
So it's for example we can have the first three qualities ours inside one group and the Lust's a couple

00:03:55.710 --> 00:03:57.580
of ones inside another group.

00:03:57.690 --> 00:03:58.320
OK.

00:03:58.320 --> 00:04:04.460
So the way you do that is going to be by using option groups.

00:04:04.490 --> 00:04:13.360
So where do we get a copy or selects menu inside the second day if you want.

00:04:13.440 --> 00:04:16.190
You can place this inside a form.

00:04:17.290 --> 00:04:23.240
That's best because it's usually a form.

00:04:23.290 --> 00:04:28.030
OK.

00:04:34.770 --> 00:04:35.270
OK.

00:04:35.580 --> 00:04:42.750
So as we said so the first three elements we're going to have them inside a a group or options group

00:04:42.750 --> 00:04:43.260
.

00:04:43.260 --> 00:04:43.800
So

00:04:49.980 --> 00:04:56.630
we're going to do we're going to use the group tag.

00:04:57.110 --> 00:04:58.290
OK.

00:04:59.010 --> 00:05:07.580
And we're just going to copy these three inside.

00:05:11.980 --> 00:05:14.500
All right.

00:05:16.360 --> 00:05:21.180
As the first group and then the second group you know the same thing

00:05:24.850 --> 00:05:31.420
that are going to copy these two inside.

00:05:35.290 --> 00:05:37.140
OK.

00:05:37.470 --> 00:05:39.150
Here is the page.

00:05:39.270 --> 00:05:39.650
OK.

00:05:39.840 --> 00:05:47.670
Well we need to use the set explain you again so we are going to access the ID of the select menu.

00:05:47.670 --> 00:05:53.370
OK we need to give this one an ID strength to strength too.

00:05:54.210 --> 00:05:57.350
OK.

00:05:58.760 --> 00:06:01.470
OK let's also have a label just before

00:06:02.890 --> 00:06:06.010
.

00:06:09.450 --> 00:06:10.250
OK.

00:06:10.580 --> 00:06:10.880
OK.

00:06:10.890 --> 00:06:21.300
Now we get a selects the second selects menu using its ID which is strength to going to use the same

00:06:21.300 --> 00:06:24.750
method selects menu.

00:06:25.050 --> 00:06:28.800
So it is refresh the page and see how it works.

00:06:28.890 --> 00:06:32.910
OK let's Syal this as well

00:06:32.930 --> 00:06:39.320
.

00:06:46.290 --> 00:06:48.140
OK.

00:06:48.540 --> 00:06:52.850
That is OK.

00:06:53.760 --> 00:06:55.940
We don't see any groups yet.

00:06:56.270 --> 00:06:56.590
OK.

00:06:56.640 --> 00:07:01.520
And the reason is because we don't have any labels for our group.

00:07:01.630 --> 00:07:03.990
So the first group we're going to give is a label

00:07:06.990 --> 00:07:10.580
group 1.

00:07:11.210 --> 00:07:18.860
And the second group we're going to give is also a label group 2.

00:07:19.020 --> 00:07:22.050
Now we're going to be able to see them.

00:07:22.880 --> 00:07:23.720
All right.

00:07:24.220 --> 00:07:30.690
So we cannot selects the the group itself but we can select all the elements inside the group