Creating_HTML_DD_List.html
HTML document, ASCII text, with very long lines (4708)
1<!DOCTYPE html> 2<html lang="en-us" prefix="og: https://ogp.me/ns#"> 3 4<head> 5 6 7<meta charset="UTF-8" /> 8<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 9<title>Creating a HTML drop-down list - S0G</title> 10<link rel="stylesheet" href="/src/global.css" /> 11<meta property="og:locale" content="en_US"/> 12<meta property="og:site_name" content="Steve0Greatness' Site"/> 13 14<link rel="stylesheet" href="/src/pygments-friendly.css" /> 15<link rel="stylesheet" href="/src/blog.css" /> 16<link rel="alternate" href="/blog/Creating_HTML_DD_List.txt" type="text/plain" title="Post source" /> 17<meta property="og:title" content="Creating a HTML drop-down list" /> 18<meta property="og:url" content="https://steve0greatness.github.io/blog/Creating_HTML_DD_List.html" /> 19 20</head> 21 22<body> 23<header> 24<h2><a href="/">Steve0Greatness</a></h2> 25<nav> 26<a href="/blog">Blog</a> 27<a href="/link-tree.html">Link Tree</a> 28</nav> 29</header> 30 31<ol role="navigation" class="breadcrumbs" aria-roledescription="Site breadcrumb"> 32<li> 33<a href="/">Index</a> 34</li> 35 36<li > 37<a href="/blog"> 38Blog Index 39</a> 40</li> 41 42<li aria-current="location"> 43 44Creating a HTML drop-down list 45 46</li> 47 48</ol> 49<main> 50<article> 51<header> 52<h2 id="blog-post-titled">Creating a HTML drop-down list</h2> 53<div role="toolbar" class="toolbar"> 54<a href="https://toot.kytta.dev/?text=Take a look at this article by @S0G@mastodon.social: https://steve0greatness.github.io/blog/Creating_HTML_DD_List.html" title="Share to Mastodon"> 55<img src="/toot-kytta-dev-icon.svg" width="16" height="16" aria-hidden="true" title="Share to Mastodon" /> 56</a> 57<a href="/blog/Creating_HTML_DD_List.html" title="Direct link"> 58<span aria-hidden="true"> 59🔗 60</span> 61</a> 62<a href="/blog/Creating_HTML_DD_List.txt" title="Markdown source"> 63<img src="/md-src.svg" width="16" height="16" aria-hidden="true" /> 64</a> 65</div> 66<time>2021 Oct 01</time> 67</header> 68<p>Inorder to create a drop-down selection list in HTML, we must first understand why they are important.<br>Drop-down lists can be used in lots of ways, from creating a way for people to chose from a strict set of options, to making an on-off switch(even though you should use buttons for that)<br>Before we start, here is an example:<table><td style="font-weight: bolder; text-align: right; font-size: 1em;">Select Image: </td><td><select id="selcet" onchange="document.getElementById('img').src = document.getElementById('selcet').value"><option value="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" selected>Img 1</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Wilfried_Gruhn.jpg/121px-Wilfried_Gruhn.jpg">Img 2</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Blackcap_%28Sylvia_atricapilla%29_male.jpg/129px-Blackcap_%28Sylvia_atricapilla%29_male.jpg">Img 3</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Lt._Gen._Nguy%E1%BB%85n_V%C4%83n_Thi%E1%BB%87u_at_Cam_Ranh_Base%2C_October_26%2C_1966.jpg/116px-Lt._Gen._Nguy%E1%BB%85n_V%C4%83n_Thi%E1%BB%87u_at_Cam_Ranh_Base%2C_October_26%2C_1966.jpg">Img 3</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Steve_Stricker.jpg/157px-Steve_Stricker.jpg">Img 4</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg/350px-Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg">Img 5</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Michael_Whelan_-_Lucca_2017.jpg/118px-Michael_Whelan_-_Lucca_2017.jpg">Img 6</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/St_Pancras_Railway_Station_2012-06-23.jpg/152px-St_Pancras_Railway_Station_2012-06-23.jpg">Img 7</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Mae_La_refugee_camp_TFA.jpg/162px-Mae_La_refugee_camp_TFA.jpg">Img 8</option><option value="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/JimmyCarterPortrait_%28cropped%29.jpg/121px-JimmyCarterPortrait_%28cropped%29.jpg">Img 9</option></select></td></table><img id="img" src="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" style="width: auto; height: 10em;"><div style="font-size: 10px;">Images from <a style="color: inherit;" href="https://en.wikipedia.org">Wikipedia</a>, on <a style="color: inherit;" href="https://web.archive.org/web/20211001135954/https://en.wikipedia.org/wiki/Main_Page">Oct. 2nd & </a><a style="color: inherit;" href="https://web.archive.org/web/20211002095505/https://en.wikipedia.org/wiki/Main_Page">1st, 2021</a></div>For some weird reason, it's not in<div class="code"><input></div>It has it's own tags, know as <span class="code"><select></span> and <span class="code"><option></span>. Using these is alittle like making a list, if you've ever made one. Here's an example bit of HTML.<div class="code"><select><div style="text-indent: 1em;"><option>op 1</option></div><div style="text-indent: 1em;"><option>op 2</option></div></select></div>Next we want to add values to <span class="code"><options></span>, and an id(#) to <span class="code"><select></span>.<br>You most-likely already know how to do ids, and maybe also values(if you have used input in any way), so I'll leave it up to you.<br>However, you may not know some things that could be useful here, such as preselections, or making things update upon being changed, well, you can do preselections with <span class="code">selected</span> in the <span class="code"><option></span> that you want to be preselected. Changes done the page upon the change of the selection in the drop-down(or anything else that can be changed by the user) is <span class="code">onchange="submitFunction()"</span> being placed in the <span class="code"><select></span>.<br>Let's check back on the code that we made at the code example:<div class="code" id="finished"><select onchange="submitFunction()" id="selection"><div style="text-indent: 1em;"><option value="op1" selected>op 1</option></div><div style="text-indent: 1em;"><option value="op2">op 2</option></div></select></div>Inorder to access the selected option with JavaScript, use <span class="code">document.getElementById("selection").value</span><br>That's basically it, feel free to <span class="code">CTRL + C</span> <span class="code">CTRL + V</span> it. /s</p> 69 70</article> 71</main> 72<footer role="group"> 73<div class="footer-link-list-holder"> 74<span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span> 75<ol class="footer-link-list" aria-labelledby="footer-label-site-details"> 76<li><a href="https://github.com/Steve0Greatness/steve0greatness.github.io">Github Repository</a></li> 77<li><a href="https://steve0greatness.github.io/extras">Extras Archive</a></li> 78</ol> 79</div> 80<div class="footer-link-list-holder"> 81<span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span> 82<ol class="footer-link-list" aria-labelledby="footer-label-social-accounts"> 83<li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li> 84<li><a href="https://youtube.com/@s0g">YouTube</a></li> 85<li><a href="/link-tree.html">More...</a></li> 86</ol> 87</div> 88</footer> 89</body> 90 91</html>