HTML document, ASCII text, with very long lines (1885)
1
<!DOCTYPE html>
2
<html lang="en-us" prefix="og: https://ogp.me/ns# article: http://ogp.me/ns/article# profile: https://ogp.me/ns/profile#">
3
<head>
5
6
<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" />
13
<meta property="og:image" content="/OG-Image.png" />
14
15
<link rel="stylesheet" href="/src/code-blocks.css" />
16
<link rel="stylesheet" href="/src/blog.css" />
17
<link rel="alternate" href="/blog/Creating_HTML_DD_List.txt" type="text/plain" title="Post source" />
18
<meta property="og:title" content="Creating a HTML drop-down list" />
19
<meta property="og:type" content="article" />
20
<meta property="article:published_time" content="2021-10-01T00:00:00Z" />
21
<meta property="article:author" content"https://steve0greatness.github.io" />
22
<meta property="article:modified_time" content="2024-01-26T00:00:00Z" />
23
<meta property="profile:first_name" content="Steve0Greatness" />
24
<meta property="profile:username" content="Steve0Greatness" />
25
<meta property="profile:gender" content="male" />
26
<meta property="og:url" content="https://steve0greatness.github.io/blog/Creating_HTML_DD_List.html" />
27
</head>
29
<body>
31
<header>
32
<h2><a href="/"><img src="/SteveLogo.webp" height="35" width="215" alt="Steve0Greatness" /></a></h2>
33
<nav>
34
<a href="/blog">Blog</a>
35
<a href="/list/link-tree.html">Link Tree</a>
36
</nav>
37
</header>
38
39
<nav aria-label="breadcrumbs" aria-roledescription="Site breadcrumb">
40
<ol class="breadcrumbs">
41
42
<li>
43
<a href="/">Index</a>
44
</li>
45
46
<li >
47
<a
48
49
href="/blog"
50
>Blog Index</a>
51
</li>
52
53
<li >
54
<a
55
aria-current="location"
56
href="/blog/Creating_HTML_DD_List.html"
57
>Creating a HTML drop-down list</a>
58
</li>
59
60
61
</ol>
62
</nav>
63
<main>
64
<h1>Creating a HTML drop-down list</h1>
65
<article>
66
<header>
67
<div role="toolbar" class="toolbar">
68
<strong>Share</strong>
69
<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">
70
<img src="/toot-kytta-dev-icon.png" width="16" height="16" aria-hidden="true" title="Share to Mastodon" />
71
</a>
72
<a href="/blog/Creating_HTML_DD_List.html" title="Direct link">
73
<img src="/link-icon.png" width="16" height="16" aria-hidden="true" title="Direct link" />
74
</a>
75
<a href="/blog/Creating_HTML_DD_List.txt" title="Markdown source">
76
<img src="/md-src.png" width="16" height="16" aria-hidden="true" />
77
</a>
78
</div>
79
<div class="time-stamps">
80
<time datetime="2021-10-01T00:00:00-08:00">2021 Oct 01 PST</time>
81
- <span aria-hidden="true" style="font-style:italic">Revision as of: </span> <time datetime="2024-01-26T00:00:00-08:00" aria-label="Revision">2024 Jan 26 PST</time>
82
83
</div>
84
</header>
85
<p>In order to create a drop-down selection list in HTML, we must first understand why they are important.</p>
86
<p>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).</p>
88
<p>Before we start, here is an example:</p>
90
<p><strong>Select Image:</strong> <select id="select" onchange="document.getElementById('img').src = document.getElementById('select').value"><option value="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" selected="true">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></p>
92
<p><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;" /></p>
94
<p><small>Images from <a href="https://en.wikipedia.org">Wikipedia</a>, on <a href="https://web.archive.org/web/20211001135954/https://en.wikipedia.org/wiki/Main_Page">Oct. 2nd</a> & <a href="https://web.archive.org/web/20211002095505/https://en.wikipedia.org/wiki/Main_Page">1st, 2021</a></small></p>
96
<p>For some weird reason, it's not in <code><input></code>, it has it's own tags: <code><select></code> and <code><option></code>. Using these is a little like making a list, if you've ever made one. Here's an example bit of HTML:</p>
98
<div class="codehilite">
100
<pre><span></span><code><span class="p"><</span><span class="nt">select</span><span class="p">></span>
101
<span class="p"><</span><span class="nt">option</span><span class="p">></span>op 1<span class="p"></</span><span class="nt">option</span><span class="p">></span>
102
<span class="p"><</span><span class="nt">option</span><span class="p">></span>op 2<span class="p"></</span><span class="nt">option</span><span class="p">></span>
103
<span class="p"></</span><span class="nt">select</span><span class="p">></span>
104
</code></pre>
105
</div>
106
<p>Like all <code>input</code>s, <code>select</code> can have an id and name, and like <code>input[type=radio]</code>, <code>option</code> can have a value.</p>
108
<p>However, you may not know some things that could be useful here, such as defaulting, or making things update upon being changed, well, you can do defaulting with <code>selected</code> in the <code><option></code> 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 <code>onchange="submitFunction()"</code> being placed in the <code><select></code>.</p>
110
<p>Let's check back on the code that we made at the code example:</p>
112
<div class="codehilite">
114
<pre><span></span><code><span class="p"><</span><span class="nt">select</span> <span class="na">onchange</span><span class="o">=</span><span class="s">"submitFunction()"</span> <span class="na">id</span><span class="o">=</span><span class="s">"selection"</span><span class="p">></span>
115
<span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"op1"</span> <span class="na">selected</span><span class="p">></span>op 1<span class="p"></</span><span class="nt">option</span><span class="p">></span>
116
<span class="p"><</span><span class="nt">option</span> <span class="na">value</span><span class="o">=</span><span class="s">"op2"</span><span class="p">></span>op 2<span class="p"></</span><span class="nt">option</span><span class="p">></span>
117
<span class="p"></</span><span class="nt">select</span><span class="p">></span>
118
</code></pre>
119
</div>
120
<p>Inorder to access the selected option with JavaScript, use <code>document.getElementById("selection").value</code>.</p>
122
<p>That's basically it, feel free to <code>CTRL + C</code> <code>CTRL + V</code> it. /s</p>
124
</article>
126
</main>
127
<footer>
128
<div class="footer-link-list-holder" role="group">
129
<span aria-hidden="true" id="footer-label-site-details" class="footer-link-list-label">Site Meta</span>
130
<ol class="footer-link-list" aria-labelledby="footer-label-site-details">
131
<li><a href="/list/website-sources-mirrors.html">Source Code and Mirrors</a></li>
132
<li><a href="https://steve0greatness.github.io/extras">Extras</a></li>
133
</ol>
134
</div>
135
<div class="footer-link-list-holder" role="group">
136
<span aria-hidden="true" id="footer-label-social-accounts" class="footer-link-list-label">Social Accounts</span>
137
<ol class="footer-link-list" aria-labelledby="footer-label-social-accounts">
138
<li><a href="https://mastodon.social/@S0G" rel="me">Mastodon</a></li>
139
<li><a href="https://youtube.com/@s0g">YouTube</a></li>
140
<li><a href="/list/link-tree.html">More...</a></li>
141
</ol>
142
</div>
143
</footer>
144
</body>
145
</html>