Created
May 9, 2021 22:47
-
-
Save prof3ssorSt3v3/65d63c401743e3a56920cc5905dd3ba0 to your computer and use it in GitHub Desktop.
Code from video about linking datalists
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <link rel="stylesheet" href="/css/main.css" /> | |
| <title>Linked Datalists</title> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Linked DataLists</h1> | |
| </header> | |
| <main> | |
| <form action="#"> | |
| <p> | |
| <label for="state">State/Province</label | |
| ><input | |
| type="text" | |
| name="state" | |
| id="state" | |
| placeholder="Select a Country" | |
| /> | |
| </p> | |
| <p> | |
| <label for="country">Country</label | |
| ><input type="text" list="countries" name="country" id="country" /> | |
| </p> | |
| <!-- one data list driving a second datalist --> | |
| <datalist id="countries"> | |
| <option>Canada</option> | |
| <option>Mexico</option> | |
| <option>USA</option> | |
| </datalist> | |
| <datalist id="canada"> | |
| <option value="AB">Alberta</option> | |
| <option value="BC">British Columbia</option> | |
| <option value="MB">Manitoba</option> | |
| <option value="ON">Ontario</option> | |
| </datalist> | |
| <datalist id="mexico"> | |
| <option value="CH">Chihuahua</option> | |
| <option value="DG">Durango</option> | |
| <option value="HG">Hidalgo</option> | |
| <option value="PU">Puebla</option> | |
| </datalist> | |
| <datalist id="usa"> | |
| <option value="AK">Alaska</option> | |
| <option value="CA">California</option> | |
| <option value="TX">Texas</option> | |
| <option value="VT">Vermont</option> | |
| </datalist> | |
| </form> | |
| </main> | |
| <script src="./js/main.js" defer></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 20px; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, | |
| Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| } | |
| .formBox { | |
| padding: 1rem 2rem; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-around; | |
| align-items: center; | |
| gap: 2rem; | |
| } | |
| label { | |
| padding: 0.25rem 0.5rem; | |
| margin: 0; | |
| font-size: 1rem; | |
| } | |
| input { | |
| padding: 0.25rem 1rem; | |
| margin: 0; | |
| font-size: 1rem; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener("DOMContentLoaded", () => { | |
| let country = document.getElementById("country"); | |
| country.addEventListener("input", countrySelected); | |
| }); | |
| function countrySelected(ev) { | |
| console.log(ev.target.value); | |
| let countryName = ev.target.value.toLowerCase(); | |
| if (!document.getElementById(countryName)) return; | |
| // document.getElementById(countryName).tagName == 'DATALIST' | |
| let state = document.getElementById("state"); | |
| state.setAttribute("list", countryName); | |
| state.focus(); | |
| state.value = ""; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment