| <!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> |
