Mixing
AMP: pre selected value in select box
What is the solution to have a pre selected value in the sample below? Let's say that the third option should be selected by default when data is retrieved from JSON and the select box is shown (without user interaction).
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<select>
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
<option value="{{url}}">{{title}}</option>
</template>
</amp-list>
</select>
drop-down-menu amp-html amp-list
asked Nov 20 '18 at 4:54
Alin B.Alin B.
34
add a comment |
What is the solution to have a pre selected value in the sample below? Let's say that the third option should be selected by default when data is retrieved from JSON and the select box is shown (without user interaction).
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<select>
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
<option value="{{url}}">{{title}}</option>
</template>
</amp-list>
</select>
drop-down-menu amp-html amp-list
asked Nov 20 '18 at 4:54
Alin B.Alin B.
34
add a comment |
What is the solution to have a pre selected value in the sample below? Let's say that the third option should be selected by default when data is retrieved from JSON and the select box is shown (without user interaction).
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<select>
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
<option value="{{url}}">{{title}}</option>
</template>
</amp-list>
</select>
drop-down-menu amp-html amp-list
asked Nov 20 '18 at 4:54
Alin B.Alin B.
34
What is the solution to have a pre selected value in the sample below? Let's say that the third option should be selected by default when data is retrieved from JSON and the select box is shown (without user interaction).
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<select>
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
<option value="{{url}}">{{title}}</option>
</template>
</amp-list>
</select>
drop-down-menu amp-html amp-list
drop-down-menu amp-html amp-list
asked Nov 20 '18 at 4:54
Alin B.Alin B.
34
asked Nov 20 '18 at 4:54
Alin B.Alin B.
34
edited Nov 20 '18 at 6:57
Alin B.
asked Nov 20 '18 at 4:54
Alin B.Alin B.
34
asked Nov 20 '18 at 4:54
Alin B.Alin B.
34
asked Nov 20 '18 at 4:54
Alin B.Alin B.
34
34
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
The simplest way is adding the selected attribute in the option tags to make it the default.
<option selected value="{{url}}">{{title}}</option>
If you want to explore other options, this SO post mentioned binding. amp-bind adds custom interactivity with data binding and expressions.
answered Nov 21 '18 at 5:18
JacqueJacque
3216
Tks much Jacque! Unfortunately the above code will select by turn each option, leaving the last one selected.
– Alin B.
Nov 21 '18 at 13:12
add a comment |
There is a solution with "mustache inverted sections", but it does not work in my case due to other factors involved.
I got it thanks to [Cathy Zhu][1], on [AMP Issues support page][2].
I will provide it, in case it would be helpful for someone:
<amp-selector>
<amp-list width="auto" height="200"
layout="fixed-height"
src="//amp-list-selector.glitch.me/api/amp-list-data.json">
<template type="amp-mustache">
{{#selected}}
// content displayed if selected is true
<div class="story-entry" selected>
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
{{^selected}}
// content displayed if selected is false
<div class="story-entry">
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
</template>
</amp-list>
for the sample data:
{
"items": [
{
"title": "Cat",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": true
},
{
"title": "Dog",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
},
{
"title": "Mouse",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": false
},
{
"title": "Fish",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
}
]
}
answered Nov 21 '18 at 13:19
Alin B.Alin B.
34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386456%2famp-pre-selected-value-in-select-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
The simplest way is adding the selected attribute in the option tags to make it the default.
<option selected value="{{url}}">{{title}}</option>
If you want to explore other options, this SO post mentioned binding. amp-bind adds custom interactivity with data binding and expressions.
answered Nov 21 '18 at 5:18
JacqueJacque
3216
Tks much Jacque! Unfortunately the above code will select by turn each option, leaving the last one selected.
– Alin B.
Nov 21 '18 at 13:12
add a comment |
The simplest way is adding the selected attribute in the option tags to make it the default.
<option selected value="{{url}}">{{title}}</option>
If you want to explore other options, this SO post mentioned binding. amp-bind adds custom interactivity with data binding and expressions.
answered Nov 21 '18 at 5:18
JacqueJacque
3216
Tks much Jacque! Unfortunately the above code will select by turn each option, leaving the last one selected.
– Alin B.
Nov 21 '18 at 13:12
add a comment |
The simplest way is adding the selected attribute in the option tags to make it the default.
<option selected value="{{url}}">{{title}}</option>
If you want to explore other options, this SO post mentioned binding. amp-bind adds custom interactivity with data binding and expressions.
answered Nov 21 '18 at 5:18
JacqueJacque
3216
The simplest way is adding the selected attribute in the option tags to make it the default.
<option selected value="{{url}}">{{title}}</option>
If you want to explore other options, this SO post mentioned binding. amp-bind adds custom interactivity with data binding and expressions.
answered Nov 21 '18 at 5:18
JacqueJacque
3216
answered Nov 21 '18 at 5:18
JacqueJacque
3216
answered Nov 21 '18 at 5:18
JacqueJacque
3216
answered Nov 21 '18 at 5:18
JacqueJacque
3216
3216
Tks much Jacque! Unfortunately the above code will select by turn each option, leaving the last one selected.
– Alin B.
Nov 21 '18 at 13:12
add a comment |
Tks much Jacque! Unfortunately the above code will select by turn each option, leaving the last one selected.
– Alin B.
Nov 21 '18 at 13:12
Tks much Jacque! Unfortunately the above code will select by turn each option, leaving the last one selected.
– Alin B.
Nov 21 '18 at 13:12
Tks much Jacque! Unfortunately the above code will select by turn each option, leaving the last one selected.
– Alin B.
Nov 21 '18 at 13:12
add a comment |
There is a solution with "mustache inverted sections", but it does not work in my case due to other factors involved.
I got it thanks to [Cathy Zhu][1], on [AMP Issues support page][2].
I will provide it, in case it would be helpful for someone:
<amp-selector>
<amp-list width="auto" height="200"
layout="fixed-height"
src="//amp-list-selector.glitch.me/api/amp-list-data.json">
<template type="amp-mustache">
{{#selected}}
// content displayed if selected is true
<div class="story-entry" selected>
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
{{^selected}}
// content displayed if selected is false
<div class="story-entry">
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
</template>
</amp-list>
for the sample data:
{
"items": [
{
"title": "Cat",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": true
},
{
"title": "Dog",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
},
{
"title": "Mouse",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": false
},
{
"title": "Fish",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
}
]
}
answered Nov 21 '18 at 13:19
Alin B.Alin B.
34
add a comment |
There is a solution with "mustache inverted sections", but it does not work in my case due to other factors involved.
I got it thanks to [Cathy Zhu][1], on [AMP Issues support page][2].
I will provide it, in case it would be helpful for someone:
<amp-selector>
<amp-list width="auto" height="200"
layout="fixed-height"
src="//amp-list-selector.glitch.me/api/amp-list-data.json">
<template type="amp-mustache">
{{#selected}}
// content displayed if selected is true
<div class="story-entry" selected>
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
{{^selected}}
// content displayed if selected is false
<div class="story-entry">
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
</template>
</amp-list>
for the sample data:
{
"items": [
{
"title": "Cat",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": true
},
{
"title": "Dog",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
},
{
"title": "Mouse",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": false
},
{
"title": "Fish",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
}
]
}
answered Nov 21 '18 at 13:19
Alin B.Alin B.
34
add a comment |
There is a solution with "mustache inverted sections", but it does not work in my case due to other factors involved.
I got it thanks to [Cathy Zhu][1], on [AMP Issues support page][2].
I will provide it, in case it would be helpful for someone:
<amp-selector>
<amp-list width="auto" height="200"
layout="fixed-height"
src="//amp-list-selector.glitch.me/api/amp-list-data.json">
<template type="amp-mustache">
{{#selected}}
// content displayed if selected is true
<div class="story-entry" selected>
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
{{^selected}}
// content displayed if selected is false
<div class="story-entry">
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
</template>
</amp-list>
for the sample data:
{
"items": [
{
"title": "Cat",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": true
},
{
"title": "Dog",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
},
{
"title": "Mouse",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": false
},
{
"title": "Fish",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
}
]
}
answered Nov 21 '18 at 13:19
Alin B.Alin B.
34
There is a solution with "mustache inverted sections", but it does not work in my case due to other factors involved.
I got it thanks to [Cathy Zhu][1], on [AMP Issues support page][2].
I will provide it, in case it would be helpful for someone:
<amp-selector>
<amp-list width="auto" height="200"
layout="fixed-height"
src="//amp-list-selector.glitch.me/api/amp-list-data.json">
<template type="amp-mustache">
{{#selected}}
// content displayed if selected is true
<div class="story-entry" selected>
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
{{^selected}}
// content displayed if selected is false
<div class="story-entry">
<amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
</div>
{{/selected}}
</template>
</amp-list>
for the sample data:
{
"items": [
{
"title": "Cat",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": true
},
{
"title": "Dog",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
},
{
"title": "Mouse",
"imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
"selected": false
},
{
"title": "Fish",
"imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
"selected": false
}
]
}
answered Nov 21 '18 at 13:19
Alin B.Alin B.
34
answered Nov 21 '18 at 13:19
Alin B.Alin B.
34
answered Nov 21 '18 at 13:19
Alin B.Alin B.
34
answered Nov 21 '18 at 13:19
Alin B.Alin B.
34
34
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386456%2famp-pre-selected-value-in-select-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
