如何使用amp-selector显示多个所选选项的结果？
例如，在下面的代码中，
如果您同时选择美国和美国欧洲，名单应该显示：
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>MultiSelect</title>
<link rel="canonical" href="amps.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP Components -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-bind"src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp-custom>
/*** uncss> filename: https://code.getmdl.io/1.3.0/material.indigo-pink.min.css ***/
/**
* material-design-lite - Material Design Components in CSS, JS and HTML
* @version v1.3.0
* @license Apache-2.0
* @copyright 2015 Google, Inc.
* @link https://github.com/google/material-design-lite
*/
html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.hidden{display:none}@media print{*,*:before,*:after{background:transparent;color:#000;box-shadow:none}tr{page-break-inside:avoid}p{orphans:3;widows:3}}.mdl-button{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(255,255,255,0)}html{width:100%;height:100%;-ms-touch-action:manipulation;touch-action:manipulation}body{width:100%;min-height:100%}html,body{font-family:"Helvetica","Arial",sans-serif;font-size:14px;font-weight:400;line-height:20px}h5,h6,p{padding:0}h5{font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}h5,h6{font-family:"Roboto","Helvetica","Arial",sans-serif;margin:24px 0 16px}h6{font-size:16px;letter-spacing:.04em}h6,p{font-weight:400;line-height:24px}p{font-size:14px;letter-spacing:0;margin:0 0 16px}.mdl-color-text--red{color:#f44336 }.mdl-color-text--blue{color:#2196f3 }.mdl-color-text--grey{color:#9e9e9e }.mdl-color--black{background-color:#000 }.mdl-color-text--white{color:#fff }.mdl-button{background:0 0;border:none;border-radius:2px;color:#000;position:relative;height:36px;margin:0;min-width:64px;padding:0 16px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle}.mdl-button::-moz-focus-inner{border:0}.mdl-button:hover{background-color:rgba(158,158,158,.2)}.mdl-button:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button:active{background-color:rgba(158,158,158,.4)}.mdl-button.mdl-button--colored:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button--raised{background:rgba(158,158,158,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.mdl-button--raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);background-color:rgba(158,158,158,.4)}.mdl-button--raised:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--raised.mdl-button--colored:focus:not(:active){background-color:rgb(63,81,181)}.mdl-button--fab:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--fab.mdl-button--colored:focus:not(:active){background-color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent{color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent.mdl-button--raised{color:rgb(255,255,255);background-color:rgb(255,64,129)}.mdl-button[disabled][disabled]{color:rgba(0,0,0,.26);cursor:default;background-color:transparent}.mdl-button--raised[disabled][disabled]{background-color:rgba(0,0,0,.12);color:rgba(0,0,0,.26);box-shadow:none}@supports (-webkit-appearance:none){}@supports (pointer-events:auto){}.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgb(63,81,181)0%,rgb(63,81,181)37.5%,rgba(63,81,181,.26)37.5%,rgba(63,81,181,.26)100%);transform:scale(1)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgba(0,0,0,.12)0%,rgba(0,0,0,.12)25%,rgba(0,0,0,.26)25%,rgba(0,0,0,.26)37.5%,rgba(0,0,0,.12)37.5%,rgba(0,0,0,.12)100%);transform:scale(1)}body{margin:0}
/* custom css */
#header {
height: 24px;
padding: 16px;
margin: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 24px;
}
.menu {
float: left;
}
.search {
float: right;
}
#container {
max-width: 500px;
padding: 32px 16px 64px 16px;
margin: auto;
}
.title {
text-align: center;
}
.rating {
margin-bottom: 0;
text-align: center;
}
#carousel {
margin: 16px;
}
.dots {
text-align: center;
}
.dots span {
display: inline-block;
background: #ccc;
border-radius: 6px;
width: 12px;
height: 12px;
margin: 4px;
}
.dots span.current {
background: #555;
}
.options {
margin: 16px 0;
}
.options h6 {
text-transform: uppercase;
margin: 0 0 4px 0;
}
.colors table {
margin: 0 -8px;
}
.colors amp-img {
border: solid 2px white;
display: block;
margin: auto;
}
.colors amp-img[selected] {
outline: solid 2px red;
}
.sizes div {
border: solid 1px black;
width: 40px;
height: 40px;
line-height: 40px;
font-weight: 800;
text-align: center;
}
.sizes div[selected] {
background-color: gray;
color: white;
outline: none;
}
.unavailable::before {
content: '';
position: absolute;
border-top: 1px solid black;
margin-left: 1px;
width: 57px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
.quantity select {
font-size: 16px;
border: solid 1px gray;
padding: 8px;
}
table {
width: 100%;
}
.hidden {
display: none;
}
.center {
text-align: center;
}
.mdl-button--accent.mdl-button--accent.mdl-button--raised {
background-color: teal;
}
div {
padding: 30px 50px;
}
.regionOptions p {
display: none;
}
.regionOptions p.visible {
display: block;
}
#regions option {
margin-right: 10px;
}
</style>
</head>
<body>
<amp-state id="selected">
<script type="application/json">
{
"region": "US"
}
</script>
</amp-state>
<header id="header" class="mdl-color--black mdl-color-text--white">
<span class="mdl-color-text--blue">Multi </span>Selector
</header>
<amp-selector id="regions" on="select:AMP.setState({selected: {region: event.targetOption}})" multiple>
<div>
<p><strong>Regions: </strong></p>
<option option="US" value="US" class="mdl-button mdl-button--raised mdl-button--accent">US</option>
<option option="Europe" value="Europe" class="mdl-button mdl-button--raised mdl-button--accent">Europe</option>
<option option="Australia" value="Australia" class="mdl-button mdl-button--raised mdl-button--accent">Australia</option>
<option option="Asia" value="Asia" class="mdl-button mdl-button--raised mdl-button--accent">Asia</option>
</div>
</amp-selector>
<div class="regionOptions">
<p [class]="selected.region == 'US' ? 'visible' : ''" class="visible">US</p>
<p [class]="selected.region == 'US' ? 'visible' : ''" class="visible">US</p>
<p [class]="selected.region == 'US' || selected.region == 'Europe' ? 'visible' : ''" class="visible">US & Europe</p>
<p [class]="selected.region == 'Europe' ? 'visible' : ''" class="visible">Europe</p>
<p [class]="selected.region == 'Europe' ? 'visible' : ''" class="visible">Europe</p>
<p [class]="selected.region == 'US' || selected.region == 'Europe' || selected.region == 'Australia' ? 'visible' : ''" class="visible">Australia & US & Europe</p>
<p [class]="selected.region == 'Australia' ? 'visible' : ''" class="visible">Australia</p>
<p [class]="selected.region == 'Australia' ? 'visible' : ''"class="visible">Australia</p>
<p [class]="selected.region == 'Asia' ? 'visible' : ''"class="visible">Asia</p>
</div>
</body>
</html>
答案 0 :(得分：1)
据我所知，amp-selector只允许单选。我想在这种情况下尝试使用复选框
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>MultiSelect</title>
<link rel="canonical" href="amps.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- AMP Components -->
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-bind"src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp-custom>
/*** uncss> filename: https://code.getmdl.io/1.3.0/material.indigo-pink.min.css ***/
/**
* material-design-lite - Material Design Components in CSS, JS and HTML
* @version v1.3.0
* @license Apache-2.0
* @copyright 2015 Google, Inc.
* @link https://github.com/google/material-design-lite
*/
html{color:rgba(0,0,0,.87)}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.hidden{display:none}@media print{*,*:before,*:after{background:transparent;color:#000;box-shadow:none}tr{page-break-inside:avoid}p{orphans:3;widows:3}}.mdl-button{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(255,255,255,0)}html{width:100%;height:100%;-ms-touch-action:manipulation;touch-action:manipulation}body{width:100%;min-height:100%}html,body{font-family:"Helvetica","Arial",sans-serif;font-size:14px;font-weight:400;line-height:20px}h5,h6,p{padding:0}h5{font-size:20px;font-weight:500;line-height:1;letter-spacing:.02em}h5,h6{font-family:"Roboto","Helvetica","Arial",sans-serif;margin:24px 0 16px}h6{font-size:16px;letter-spacing:.04em}h6,p{font-weight:400;line-height:24px}p{font-size:14px;letter-spacing:0;margin:0 0 16px}.mdl-color-text--red{color:#f44336 }.mdl-color-text--blue{color:#2196f3 }.mdl-color-text--grey{color:#9e9e9e }.mdl-color--black{background-color:#000 }.mdl-color-text--white{color:#fff }.mdl-button{background:0 0;border:none;border-radius:2px;color:#000;position:relative;height:36px;margin:0;min-width:64px;padding:0 16px;display:inline-block;font-family:"Roboto","Helvetica","Arial",sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:0;overflow:hidden;will-change:box-shadow;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:36px;vertical-align:middle}.mdl-button::-moz-focus-inner{border:0}.mdl-button:hover{background-color:rgba(158,158,158,.2)}.mdl-button:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button:active{background-color:rgba(158,158,158,.4)}.mdl-button.mdl-button--colored:focus:not(:active){background-color:rgba(0,0,0,.12)}.mdl-button--raised{background:rgba(158,158,158,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.mdl-button--raised:active{box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);background-color:rgba(158,158,158,.4)}.mdl-button--raised:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--raised.mdl-button--colored:focus:not(:active){background-color:rgb(63,81,181)}.mdl-button--fab:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);background-color:rgba(158,158,158,.4)}.mdl-button--fab.mdl-button--colored:focus:not(:active){background-color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent{color:rgb(255,64,129)}.mdl-button--accent.mdl-button--accent.mdl-button--raised{color:rgb(255,255,255);background-color:rgb(255,64,129)}.mdl-button[disabled][disabled]{color:rgba(0,0,0,.26);cursor:default;background-color:transparent}.mdl-button--raised[disabled][disabled]{background-color:rgba(0,0,0,.12);color:rgba(0,0,0,.26);box-shadow:none}@supports (-webkit-appearance:none){}@supports (pointer-events:auto){}.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(63,81,181,.26)}.mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgb(63,81,181)0%,rgb(63,81,181)37.5%,rgba(63,81,181,.26)37.5%,rgba(63,81,181,.26)100%);transform:scale(1)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb{box-shadow:0 0 0 10px rgba(0,0,0,.12);background:rgba(0,0,0,.12)}.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb{background:radial-gradient(circle closest-side,rgba(0,0,0,.12)0%,rgba(0,0,0,.12)25%,rgba(0,0,0,.26)25%,rgba(0,0,0,.26)37.5%,rgba(0,0,0,.12)37.5%,rgba(0,0,0,.12)100%);transform:scale(1)}body{margin:0}
/* custom css */
#header {
height: 24px;
padding: 16px;
margin: 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 24px;
}
.menu {
float: left;
}
.search {
float: right;
}
#container {
max-width: 500px;
padding: 32px 16px 64px 16px;
margin: auto;
}
.title {
text-align: center;
}
.rating {
margin-bottom: 0;
text-align: center;
}
#carousel {
margin: 16px;
}
.dots {
text-align: center;
}
.dots span {
display: inline-block;
background: #ccc;
border-radius: 6px;
width: 12px;
height: 12px;
margin: 4px;
}
.dots span.current {
background: #555;
}
.options {
margin: 16px 0;
}
.options h6 {
text-transform: uppercase;
margin: 0 0 4px 0;
}
.colors table {
margin: 0 -8px;
}
.colors amp-img {
border: solid 2px white;
display: block;
margin: auto;
}
.colors amp-img[selected] {
outline: solid 2px red;
}
.sizes div {
border: solid 1px black;
width: 40px;
height: 40px;
line-height: 40px;
font-weight: 800;
text-align: center;
}
.sizes div[selected] {
background-color: gray;
color: white;
outline: none;
}
.unavailable::before {
content: '';
position: absolute;
border-top: 1px solid black;
margin-left: 1px;
width: 57px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
.quantity select {
font-size: 16px;
border: solid 1px gray;
padding: 8px;
}
table {
width: 100%;
}
.hidden {
display: none;
}
.center {
text-align: center;
}
.mdl-button--accent.mdl-button--accent.mdl-button--raised {
background-color: teal;
}
div {
padding: 30px 50px;
}
.regionOptions p {
display: none;
}
.regionOptions p.visible {
display: block;
}
#regions option {
margin-right: 10px;
}
</style>
</head>
<body>
<amp-state id="selected">
<script type="application/json">
{
"US": false,
"Europe": false,
"Australia": false,
"Asia": false
}
</script>
</amp-state>
<header id="header" class="mdl-color--black mdl-color-text--white">
<span class="mdl-color-text--blue">Multi </span>Selector
</header>
<div>
<input type="checkbox" value="US" on="change:AMP.setState({selected:{US: event.checked, Europe: selected.Europe, Australia: selected.Australia, Asia: selected.Asia }})" >US</input>
<input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: event.checked, Australia: selected.Australia, Asia: selected.Asia }})" >Europe</input>
<input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: selected.Europe, Australia: event.checked, Asia: selected.Asia }})" >Australia</input>
<input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: selected.Europe, Australia: selected.Australia, Asia: event.checked }})" >Asia</input>
</div>
<div class="regionOptions">
<p [class]="selected.US ? 'visible' : ''" class="visible">US</p>
<p [class]="selected.US? 'visible' : ''" class="visible">US</p>
<p [class]="selected.US || selected.Europe ? 'visible' : ''" class="visible">US & Europe</p>
<p [class]="selected.Europe ? 'visible' : ''" class="visible">Europe</p>
<p [class]="selected.Europe ? 'visible' : ''" class="visible">Europe</p>
<p [class]="selected.US || selected.Europe || selected.Australia ? 'visible' : ''" class="visible">Australia & US & Europe</p>
<p [class]="selected.Australia ? 'visible' : ''" class="visible">Australia</p>
<p [class]="selected.Australia ? 'visible' : ''"class="visible">Australia</p>
<p [class]="selected.Asia ? 'visible' : ''"class="visible">Asia</p>
</div>
</body>
</html>
答案 1 :(得分：0)
根据 Hai Bui 答案：您可以将复选框转换为按钮
HTML CODE
<div>
<label class="btn">
<input type="checkbox" value="US" on="change:AMP.setState({selected:{US: event.checked, Europe: selected.Europe, Australia: selected.Australia, Asia: selected.Asia }})"/>
<span>US</span>
</label>
<label class="btn">
<input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: event.checked, Australia: selected.Australia, Asia: selected.Asia }})" />
<span>Europe</span>
</label>
<label class="btn">
<input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: selected.Europe, Australia: event.checked, Asia: selected.Asia }})" />
<span>Australia</span>
</label>
<label class="btn">
<input type="checkbox" value="US" on="change:AMP.setState({selected:{US: selected.US, Europe: selected.Europe, Australia: selected.Australia, Asia: event.checked }})" >
<span>Asia</span>
</label>
</div>
CSS代码
.btn { position:relative; }
.btn input { position:absolute; top:-20px; }
.btn span { background-color: teal;
border:0px solid #000;
border-radius: 2px;
position: relative;
height: 36px;
margin: 0;
min-width: 64px;
padding: 0 16px;
display: inline-block;
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0;
overflow: hidden;
will-change: box-shadow;
transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
outline: none;
cursor: pointer;
text-decoration: none;
text-align: center;
line-height: 36px;
vertical-align: middle;
color:#fff;
}
.btn input:checked + span { border:1px solid #000; box-shadow:0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); }