<!DOCTYPE html>
@WAIT-FOR:Ready
@EXECUTE-AND-WAIT-FOR:selectOption2()
@EXECUTE-AND-WAIT-FOR:selectOption3()
@EXECUTE-AND-WAIT-FOR:selectOption1()
@BLINK-ALLOW:htmlTag*
@BLINK-ALLOW:className*
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Web Select</title>
<script type="module">
import { injectImportMap, loadAndWaitForReady } from "./resources/utils.js";
injectImportMap();
const components = [
"md-filled-select",
"md-outlined-select",
"md-select-option"
];
loadAndWaitForReady(components, () => {
const statusDiv = document.getElementById("status");
const selects = [
{
tag: "md-filled-select",
label: "Filled select",
id: "test-select",
options: [
{ value: "option1", text: "Option 1" },
{ value: "option2", text: "Option 2" },
{ value: "option3", text: "Option 3" }
]
},
{
tag: "md-outlined-select",
label: "Outlined select",
options: [
{ value: "apple", text: "Apple" },
{ value: "banana", text: "Banana", selected: true },
{ value: "orange", text: "Orange" }
]
},
{
tag: "md-filled-select",
label: "Required select",
required: true,
options: [
{ value: "red", text: "Red" },
{ value: "green", text: "Green" },
{ value: "blue", text: "Blue" }
]
},
{
tag: "md-outlined-select",
label: "Disabled select",
disabled: true,
options: [
{ value: "disabled1", text: "Disabled Option 1" },
{ value: "disabled2", text: "Disabled Option 2" }
]
}
];
selects.forEach(selectInfo => {
const select = document.createElement(selectInfo.tag);
select.label = selectInfo.label;
if (selectInfo.id) {
select.id = selectInfo.id;
}
if (selectInfo.required) {
select.required = true;
}
if (selectInfo.disabled) {
select.disabled = true;
}
selectInfo.options.forEach(optionInfo => {
const option = document.createElement("md-select-option");
option.value = optionInfo.value;
option.textContent = optionInfo.text;
if (optionInfo.selected) {
option.selected = true;
}
select.appendChild(option);
});
statusDiv.appendChild(select);
});
statusDiv.setAttribute("aria-label", "Ready");
});
</script>
</head>
<body>
<div id="status" aria-label="Loading">
</div>
</body>
<script>
async function selectOption2() {
const select = document.getElementById("test-select");
if (select) {
await select.updateComplete;
select.value = "option2";
await select.updateComplete;
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Option 2 Selected";
statusDiv.appendChild(statusText);
return "Option 2 Selected";
}
return "Failed to select Option 2";
}
async function selectOption3() {
const select = document.getElementById("test-select");
if (select) {
await select.updateComplete;
select.value = "option3";
await select.updateComplete;
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Option 3 Selected";
statusDiv.appendChild(statusText);
return "Option 3 Selected";
}
return "Failed to select Option 3";
}
async function selectOption1() {
const select = document.getElementById("test-select");
if (select) {
await select.updateComplete;
select.value = "option1";
await select.updateComplete;
const statusDiv = document.getElementById("status");
const statusText = document.createElement("div");
statusText.textContent = "Option 1 Selected";
statusDiv.appendChild(statusText);
return "Option 1 Selected";
}
return "Failed to select Option 1";
}
</script>
</html>
