A mirror of my website's source code.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 Creating_HTML_DD_List.md

View raw Download
text/html • 4.67 kiB
HTML document, ASCII text, with very long lines (4714)

title: Creating a HTML drop-down list date: 2021 Oct 01 --- Inorder to create a drop-down selection list in HTML, we must first understand why they are important.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)Before we start, here is an example: bolder; text-align: right; font-size: 1em;"Select Image: option value="https://upload.wikimedia.org/wikipedia/commons/a/a2/Paul_von_Hindenburg_%281914%29_von_Nicola_Perscheid.jpg" selected="true"Img 1option value="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Wilfried_Gruhn.jpg/121px-Wilfried_Gruhn.jpg"Img 2option value="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Blackcap_%28Sylvia_atricapilla%29_male.jpg/129px-Blackcap_%28Sylvia_atricapilla%29_male.jpg"Img 3option 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 3option value="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Steve_Stricker.jpg/157px-Steve_Stricker.jpg"Img 4option value="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg/350px-Aegotheles_chrisoptus_-_Catlereigh_Nature_Reserve.jpg"Img 5option value="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Michael_Whelan_-_Lucca_2017.jpg/118px-Michael_Whelan_-_Lucca_2017.jpg"Img 6option 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 7option value="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Mae_La_refugee_camp_TFA.jpg/162px-Mae_La_refugee_camp_TFA.jpg"Img 8option value="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/JimmyCarterPortrait_%28cropped%29.jpg/121px-JimmyCarterPortrait_%28cropped%29.jpg"Img 9img 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;" / 10px;"Images from a style="color: inherit;" href="https://en.wikipedia.org"Wikipedia, on a style="color: inherit;" href="https://web.archive.org/web/20211001135954/https://en.wikipedia.org/wiki/Main_Page"Oct. 2nd & a style="color: inherit;" href="https://web.archive.org/web/20211002095505/https://en.wikipedia.org/wiki/Main_Page"1st, 2021For some weird reason, it's not in<input>It has it's own tags, know as <select> and <option>. Using these is alittle like making a list, if you've ever made one. Here's an example bit of HTML.<select> 1em;"<option>op 1</option> 1em;"<option>op 2</option></select>Next we want to add values to <options>, and an id(#) to <select>.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.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 selected in the <option> 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 onchange="submitFunction()" being placed in the <select>.Let's check back on the code that we made at the code example:<select onchange="submitFunction()" id="selection"> 1em;"<option value="op1" selected>op 1</option> 1em;"<option value="op2">op 2</option></select>Inorder to access the selected option with JavaScript, use document.getElementById("selection").valueThat's basically it, feel free to CTRL + C CTRL + V it. /s

                
                    
1
---
2
title: Creating a HTML drop-down list
3
date: 2021 Oct 01
4
---
5
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="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></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">&lt;input&gt;</div>It has it's own tags, know as <span class="code">&lt;select&gt;</span> and <span class="code">&lt;option&gt;</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">&lt;select&gt;<div style="text-indent: 1em;">&lt;option&gt;op 1&lt;/option&gt;</div><div style="text-indent: 1em;">&lt;option&gt;op 2&lt;/option&gt;</div>&lt;/select&gt;</div>Next we want to add values to <span class="code">&lt;options&gt;</span>, and an id(#) to <span class="code">&lt;select&gt;</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">&lt;option&gt;</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">&lt;select&gt;</span>.<br />Let's check back on the code that we made at the code example:<div class="code" id="finished">&lt;select onchange="submitFunction()" id="selection"&gt;<div style="text-indent: 1em;">&lt;option value="op1" selected&gt;op 1&lt;/option&gt;</div><div style="text-indent: 1em;">&lt;option value="op2"&gt;op 2&lt;/option&gt;</div>&lt;/select&gt;</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