Adding data-* demo for select options.

bennadel · bennadel · commit ad762ccadd76 · 2026-01-10T06:43:03.000-05:00
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [Storing Metadata On Select Option Elements](https://bennadel.github.io/JavaScript-Demos/demos/select-option-dataset)
 * [Exploring Prev/Next Mechanics In HTMX](https://bennadel.github.io/JavaScript-Demos/demos/htmx-prev-next)
 * [Pixel Art With Alpine.js](https://bennadel.github.io/JavaScript-Demos/demos/pixel-art-alpine)
 * [Movie Ranking With Sortable.js And Kendall Tau Distance](https://bennadel.github.io/JavaScript-Demos/demos/movie-rank)
diff --git a/demos/select-option-dataset/index.htm b/demos/select-option-dataset/index.htm
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Storing Metadata On Select Option Elements
+	</title>
+	<link rel="stylesheet" type="text/css" href="./main.css" />
+</head>
+<body>
+
+	<h1>
+		Storing Metadata On Select Option Elements
+	</h1>
+
+	<select name="friendID">
+		<option value="">
+			- Select -
+		</option>
+		<option value="1" data-bff="true" data-disposition="spicy">
+			Naomi
+		</option>
+		<option value="2" data-bff="false" data-disposition="calm">
+			Jon
+		</option>
+		<option value="3" data-bff="false" data-disposition="unpredictable">
+			Kim
+		</option>
+		<option value="4" data-bff="false" data-disposition="fun">
+			Lara
+		</option>
+	</select>
+
+	<script type="text/javascript">
+
+		var select = document.querySelector( "select" );
+
+		// Listen for changes in selection.
+		select.oninput = ( event ) => {
+
+			// Ignore re-selection of empty option.
+			if ( ! select.value ) {
+
+				return;
+
+			}
+
+			var option = select.selectedOptions[ 0 ];
+
+			console.group( "Friend Selection" );
+			console.log( `ID: ${ select.value }` );
+			console.log( `Name: ${ option.label }` );
+			// In addition to the core VALUE/LABEL properties, we can consume the OPTION
+			// just like any other HTML element, which means we can use the `data-*`
+			// attributes to relay additional information associated with the option.
+			console.log( `BFF: ${ option.dataset.bff }` );
+			console.log( `Disposition: ${ option.dataset.disposition }` );
+			console.groupEnd();
+
+		};
+
+	</script>
+
+</body>
+</html>
diff --git a/demos/select-option-dataset/main.css b/demos/select-option-dataset/main.css
@@ -0,0 +1,36 @@
+
+:where( html ) {
+	box-sizing: border-box ;
+
+	& *,
+	& *:before,
+	& *:after {
+		box-sizing: inherit ;
+	}
+}
+
+:where( * ) {
+	&:focus,
+	&:focus-within {
+		outline-color: hotpink ;
+		outline-offset: 4px ;
+		outline-width: 2px ;
+	}
+}
+
+body {
+	font-family: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif ;
+	font-size: 18px ;
+	line-height: 1.4 ;
+}
+
+button,
+input:where([type="text"]),
+select,
+textarea {
+	color: inherit ;
+	font-family: inherit ;
+	font-size: 20px ;
+	line-height: inherit ;
+	padding: 5px 10px ;
+}
