<!DOCTYPE html>
<
html
amp>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>GeeksForGeeks | amp-bind</
title
>
<
link
rel
=
"canonical"
href
=
<
meta
name
=
"viewport"
content="
width
=
device
-width,
minimum-scale
=
1
,
initial-scale
=
1
" />
<
script
async
src
=
</
script
>
<
script
async
custom-element
=
"amp-bind"
</
script
>
<
style
amp-boilerplate>
body {
-webkit-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
animation:
-amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</
style
>
<
noscript
>
<
style
amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</
style
>
</
noscript
>
<
style
amp-custom>
h1 {
color: forestgreen;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
>Geeks For Geeks</
h1
>
</
center
>
<
div
style
=
"padding: 1em; color: crimson;"
>
<
label
><
u
>Select the option</
u
>: </
label
>
<
select
on="change:AMP.setState
({option: event.value})">
<
option
value
=
"0"
>No selection</
option
>
<
option
value
=
"1"
>Option 1</
option
>
<
option
value
=
"2"
>Option 2</
option
>
</
select
>
<
br
/>
<
div
hidden [hidden]="option != 1">
<
h3
>You have selected Option 1</
h3
>
</
div
>
<
div
hidden [hidden]="option != 2">
<
h3
>You have selected Option 2</
h3
>
</
div
>
</
div
>
</
body
>
</
html
>