| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0"> |
| <title>Test Page for <select> elements</title> |
| </head> |
| <body> |
| <p> |
| <label for="plainSelect">Plain Select:</label> |
| <select id="plainSelect" aria-label="plain-select"> |
| <option>alpha</option> |
| <option>beta</option> |
| <option>gamma</option> |
| <option value="last">omega</option> |
| <option disabled>disabledOption</option> |
| </select> |
| <script> |
| let select_event_log = []; |
| let log_handler = e => select_event_log.push(`${e.type}`); |
| document.getElementById('plainSelect').addEventListener('change', log_handler); |
| document.getElementById('plainSelect').addEventListener('input', log_handler); |
| </script> |
| </p> |
| |
| <p> |
| <label for="groupedSelect">Grouped Select:</label> |
| <select id="groupedSelect" aria-label="grouped-select"> |
| <optgroup label="Greek"> |
| <option>alpha</option> |
| <option>beta</option> |
| <option>gamma</option> |
| </optgroup> |
| <optgroup label="Latin"> |
| <option>a</option> |
| <option>b</option> |
| <option>c</option> |
| </optgroup> |
| <optgroup label="Disabled" disabled> |
| <option>foobar</option> |
| </optgroup> |
| </select> |
| </p> |
| |
| <p> |
| <label for="disabledSelect">Disabled Select:</label> |
| <select id="disabledSelect" disabled aria-label="disabled-select"> |
| <option>alpha</option> |
| <option>beta</option> |
| <option>gamma</option> |
| </select> |
| </p> |
| |
| <p> |
| <label for="nonOptionsSelect">Select With non-<option> Children:</label> |
| <select id="nonOptionsSelect" aria-label="non-options-select"> |
| <option>alpha</option> |
| <hr /> |
| <span value="beta">beta</span> |
| <button value="gamma">gamma</button> |
| <option>delta</option> |
| <button value="epsilon">epsilon</button> |
| <option>epsilon</option> |
| </select> |
| </p> |
| |
| <p> |
| <label for="listboxSelect">Listbox Select:</label> |
| <select id="listboxSelect" size="5" multiple aria-label="listbox-select"> |
| <option>alpha</option> |
| <option>beta</option> |
| <option>gamma</option> |
| <option>delta</option> |
| <option>epsilon</option> |
| </select> |
| </p> |
| |
| <p> |
| <label for="eventListenerSelect">Select with event listeners:</label> |
| <select id="eventListenerSelect" aria-label="event-listener-select"> |
| <option>alpha</option> |
| <option>beta</option> |
| <option>gamma</option> |
| </select> |
| </p> |
| |
| <p style="position:absolute; top: 150vh;"> |
| <label for="offscreenSelect">Offscreen Select:</label> |
| <select id="offscreenSelect" aria-label="offscreen-select"> |
| <option>alpha</option> |
| <option>beta</option> |
| </p> |
| |
| </body> |
| </html> |
